- Go to edit the template and search ]]></b:skin>
usually use ctrl f to accelerate
is easy but it is good to save or download your template
perhaps also because it does not fit with your template design
but if you need it I think is worth a try
ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 10px 10px 20px;
}
ul.enlarge img{
background-color:#eae9d4;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#eae9d4;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center;
color: #495a62;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}
ul.enlarge li:hover:nth-child(4) span{
left: -300px;
}
- After you grab the widget gets stored in. javascript widget, and Put the code below:
<li><img src="Your little picture.jpg" width="100px" height="80px" alt="Dechairs" /><span><img src="your big picture" alt="little pic" /><br />your writing</span></li>
<li><img src="Your little picture.jpg" width="100px" height="80px" alt="Blackpool sunset" /><span><img src="your big picture" alt="big picture" /><br />your writing</span></li>
<li><img src="Your little picture.jpg" width="100px" height="80px" alt="Blackpool pier" /><span><img src="your big picture" alt="little pic" /><br />your writing</span></li>
<li><img src="Your little picture.jpg" width="100px" height="80px" alt="Blackpool pier" /><span><img src="your big picture" alt="big picture" /><br />your writing</span></li></ul></center>
DEMO
if you are fiddling will look like this :>>>><<<<<<
