Perhaps saving space is a must for every blogger including photos on display. This photo effects simply bloats up your image on mouseover. Enlarging an image over the other is one way of giving an emphasis to focus on individual photos. Ok lets get started.
1. Straight go to <head> and simply paste the code below. (Read <head> Tips Here).
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin-left: 12px;
padding:0;
}
.bubblewrap li{
display:inline;
width: 40px;
height:40px;
}
.bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* height of each image.*/
border:0;
margin-right: 8px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
.bubblewrap{
list-style-type:none;
margin-left: 12px;
padding:0;
}
.bubblewrap li{
display:inline;
width: 40px;
height:40px;
}
.bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* height of each image.*/
border:0;
margin-right: 8px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
To learn more about the code above, here are some pointers:
-margin-left: 12px; is the margin of the (first) image from its left
-width: 40px and height:40px from the .bubblewrap li must be the same with the image dimension on the .bubblewrap li img
-width: 40px and height:40px from the .bubblewrap li img is the default image size visible on page without mouseover.
-margin-right: 8px is the spaces between images
-1.8 as seen three times is the size of the image when bloat up
Note that when using photos of different heights and widths, it is smart to use "auto" for the height and for the width, get the average length of all the images. For better output, use images with related dimensions.
2. Time to add photos, go to the page you want to insert and drag one "embed code" then paste the following as seen on the demo page:
<ul class="bubblewrap">
<li><img src="http://theweeblytricks.weebly.com/files/theme/facebook.png" title="Add to Facebook" alt="Facebook" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/twitter.png" title="Add to Twitter" alt="Twitter" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/stumbleupon.png" title="Add to Stumbleupon" alt="Stumbleupon" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/yahoo.png" title="Add to Yahoo" alt="Yahoo" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/rss.png" title="Add to RSS" alt="RSS" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
</ul>
<li><img src="http://theweeblytricks.weebly.com/files/theme/facebook.png" title="Add to Facebook" alt="Facebook" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/twitter.png" title="Add to Twitter" alt="Twitter" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/stumbleupon.png" title="Add to Stumbleupon" alt="Stumbleupon" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/yahoo.png" title="Add to Yahoo" alt="Yahoo" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
<li><img src="http://theweeblytricks.weebly.com/files/theme/rss.png" title="Add to RSS" alt="RSS" height="50" width="50" Hspace="20" Vspace="20" /></a></li>
</ul>
These five images are under the effect of bubblewrap which you've placed in the <head>. I added the height="50" width="50" to keep the image size small while working and one of the most important element is the Hspace="20" Vspace="20" which keeps a space around the image to assist its bloating.
Everything will be alright just make sure to change the values properly. Questions? please ask below.
0 comments: