February 25, 2014

Weebly Tricks #31 - Bloating/ Enlarge Image

Posted by Domingo Tambasacan at 2/25/2014

Bloating/ Enlarge Image on Mouseover




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>

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>

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.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top