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.
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>
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); }
that's it, hope this will be very useful.
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
Thanks Nice Demo
ReplyDeleteThere 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.
ReplyDeleteTo 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
thnxxxxx
ReplyDeletenice demo...........
ReplyDelete