February 16, 2015

Weebly Tricks #92 - Enlarge Image within Hover

Posted by Domz at 2/16/2015

Enlarge Image on Mouseover Weebly


Added to our mouseover collection is an effect to enlarge image automatically within hover. The CSS3 transform property creates a very smooth effect to view an image larger. Most of all, we will only need few CSS codes without the use of JQuery. Its easy and everybody happy.







HEADER CODE
Where to place these codes? Click Here!


<style>
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.2); /*Mozilla scale version*/
-o-transform:scale(1.2); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>

Notes:
Red text - This is the initial size of you images. Change to adjust.
Green text - The transform scale of the image when you hover. The higher... the bigger.
Blue text - This makes the overflow visible specially when an image has a nearby element. You don't have to edit this code.


BODY CODE
Where to place these codes? Click Here!


<div class="hovergallery">
<img src="http://mwtdatabase.weebly.com/files/theme/diaw1.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw2.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw3.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw4.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw5.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw6.jpg" />
</div>

Notes:
Green text - The image source.


CONCLUSION





Some people preferred simple effects for photos and this tutorial is right for them.

Ahh, before I forgot, you can also add links to your images, just post your queries on the forum. Goodluck and belated Happy Valentines Day.


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


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!

...

5 comments:

  1. sir i want to make a image gallary site plz tel me best and easy gallary and slidshow effect plz answer below

    ReplyDelete
    Replies
    1. Hi,

      Browse some of our slideshow tutorials... apply them first and choose which one makes the best output with less effort.

      Delete
  2. Hi,

    How is possible add links to immages? Thank you for your job ;)

    ReplyDelete
  3. Does this work in IE? I tested it good in Firefox, Chrome, and Safari. It did not work in IE 9 at all. In IE 11 it shows a border on mouse over but does not grow.

    Thansk for sharing this code!

    ReplyDelete

 

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

Home | | Privacy Policy | Top