CSS Image Zoom Hover

designify

I am Petia Koleva and I live in Sofia,Bulgaria. I am doing web and graphic design. I also like to experiment in infographics and motion graphics design. I graduated @Gray's School of Art in Aberdeen, Scotland - BDes (Hon) Design for Digital Media. I have two design awards: BP Design Award 2012 @ Gray's School of Art and RGU Purchase Prize Award. I am very passionate about design and I share my passion on designify.me. Feel free to contact me.


You may also like...

3 comments
arcarr01
arcarr01

Hi,

did you know that this CSS code doesn't work for IE9? Do you know what it's failing?

Great work by the way,

Kind Regards

designifyme
designifyme moderator

@BizarroSkull

Hi BizzaroSkull

In order to get more zoom, you have to edit the scaling in the CSS: 


div.hover-details:hover > img

{

transform: scale(1.2);

-ms-transform: scale(1.2);

-webkit-transform: scale(1.2);

-o-transform: scale(1.2);

-moz-transform: scale(1.2);

}

If you change the "scale(1.2);" to "scale(2.2)" you will see how the image is zoomed more. 

Thanks.