How To Expand Images On Hovering Mouse In Blogger

By: Ramakrishna Ch on 15:38

This Code is made of CSS means more enjoying, By adding this code you can expand the images on hovering the mouse, you can also notice the shadows over the images. The code is supported in all modern browser except sometimes in boring Internet Explorer. It supports Mozilla, Safari, Opera, Chrome and all modern Browsers.

Before adding the code, you can checkout the demo of the hack. This is the first demo in our blog. Now lets check the hack by clicking below link



Click Here For Demo

Point your Mouse on the images to check the image hovering. To add it to your blog follow the steps below.

1. Go To Blogger
2. Go To Design
3. Backup Your Template
4. Click Edit HTML
5. Search For ]]></b:skin>
6. And Just Above ]]></b:skin> Paste The Below Code And Save The Template

.PR-BLOGGER-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.PR-BLOGGER-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

To increase or decrease the image size  change 0.7

To Change the fade increase or decrease 0.5

You are almost done, You can apply this hover effect by adding this code to your Images.

<div class="PR-BLOGGER-CSS3">
<img src="Image URL Goes Here" />
</div>

Hope you understand it, If you still any further doubts then you can comment here to solve your doubts or problems.