Image zoom on hover using css3 | 2my4edge

03 October 2013

Image zoom on hover using css3

Image zoom on hover using css3, this is actually very simple and useful tip to all web designers. here we have already discussed more tutorials about designing and here one more thing. it may useful to make portfolio and other designing purpose. let see the details about that.
image zoom on hover using ccs3

DOWNLOAD            LIVE DEMO

CODE
<ul class="imagecontainer">
    <li class="image">
    <img src="img/1.jpg" title="wire hand" width="250" height="250" />
    </li>
    <li class="image">
    <img src="img/2.jpg" title="Samantha" width="250" height="250" />
    </li>
    <li class="image">
    <img src="img/3.jpg" title="sky" width="250" height="250" />
    </li>
    <li class="image">
    <img src="img/4.jpg" title="murder" width="250" height="250" />
    </li>
</ul>
as like the above code just bring the image from location, and if you make id or class to the image make it. here i just make zoom for img tag.

CSS

.image > img { 
-webkit-transition:all 500ms linear; 
-moz-transition:all 500ms linear; 
-o-transition:all 500ms linear; 
-ms-transition:all 500ms linear; 
transition:all 500ms linear; 
}

.image > img:hover { 
-moz-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
transform: scale(1.5); 
}
if you want that similar like the demo, just make overflow:hidden; for that class image.
that's it, hope this will be very useful.


RELATED POSTS :

Rotate image on hover using CSS3

Most popular posts in 2my4edge

Change text & background color while selecting text using CSS3

Marquee style in different manner with PHP and MySql

My Demos page design details with all my tutorials

Image Zoommer like E-commerce site using multizoom.js

Facebook style Scroll bar using Jquery

Change background image while page refresh using Javascript

Better and Flexible Tooltip using LiteTooltip.js

Ajax delete with PHP and MySql


4 comments:

  1. There is a problem with this approach (in Chrome): if the container has a border-radius then when you hover the image you'll lose the radius. Also, the hover effect starts outside of the radius.
    To understand what I'm saying, try to open your demo in Chrome and play with border-radius over your .image class.

    Someone else asked me for a fix so I already have the solution in jsFiddle: http://jsfiddle.net/fabienb/szHEv/

    Cheers

    ReplyDelete

^