5/30/2015 html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

http://stackoverflow.com/questions/15757036/creatingazoomeffectonanimageonhoverusingcss 1/4

signup login tour help stackoverflowcareers

Takethe2minutetour StackOverflowisaquestionandanswersiteforprofessionalandenthusiastprogrammers.It's100%free,noregistrationrequired.

CreatingaZoomEffectonanimageonhoverusingCSS?

I'mcurrentlytryingtocreateazoomeffectonhoveroveroneofmyfourimages.Theproblemismostexamplesusuallyusetablesormaskdivstoapplysomesortofeffect.

Here'soneexamplethatimplementswhatIwouldlike .this

ismycodesofar.This

Thankssomuch!!

HTML

CSS

#menu{maxwidth:1200px;textalign:center;margin:auto;}

#menuimg{width:250px;height:375px;padding:0px5px0px5px;overflow:hidden;

}

.blog{height:375px;webkittransition:all1sease;moztransition:all1sease;otransition:all1sease;mstransition:all1sease;transition:all1sease;}

.blog:hover{cursor:pointer;height:475px;width:350px;}

.music{height:375px;}

.projects{height:375px;}

.bio{height:375px;}

css html5 class css3

editedDec26'13at5:29neshpro9394 2 15

askedApr2'13at5:49KingPolygon1,043 4 11 34

voteupforthelinkyouposted,ithelpedme:) neshpro9 Dec26'13at6:16

4Answers

5/30/2015 html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

http://stackoverflow.com/questions/15757036/creatingazoomeffectonanimageonhoverusingcss 2/4

Whataboutusing propertyanduse whichillgiveazoomlikeeffect,thiscanbedonelikeso,

CSS3transform scale

HTML

CSS

.thumbnail{width:320px;height:240px;}

.image{width:100%;height:100%;}

.imageimg{webkittransition:all1sease;/*SafariandChrome*/moztransition:all1sease;/*Firefox*/mstransition:all1sease;/*IE9*/otransition:all1sease;/*Opera*/transition:all1sease;}

.image:hoverimg{webkittransform:scale(1.25);/*SafariandChrome*/moztransform:scale(1.25);/*Firefox*/mstransform:scale(1.25);/*IE9*/otransform:scale(1.25);/*Opera*/transform:scale(1.25);}

Here'sademo .Iremovedsomeoftheelementtomakeitsimpler,youcanalwaysaddoverflowhiddentothe tohidetheoverflowofthescaledimage.

fiddle.image

propertyonlyworksinIEzoom

editedAug1'14at0:49 answeredApr2'13at6:33MitchLayzell1,406 1 8 20

5

Andwinningthe"deeplifelessonsfromcode"award,yourCSSischanting"Allisease,allisease."Nerrolken Nov1'14at0:15

Hereyougo.

Demo

http://jsfiddle.net/27Syr/4/

HTML

Yay!

Yay!

5/30/2015 html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

http://stackoverflow.com/questions/15757036/creatingazoomeffectonanimageonhoverusingcss 3/4

Yay!

Yay!

CSS

#menu{textalign:center;}

.fader{/*Givingequalsizestoeachelement*/width:250px;height:375px;

/*Positioningelementsinlines*/display:inlineblock;

/*Thisisnecessaryforposition:absolutetoworkasdesired*/position:relative;

/*Preventingzoomedimagestogrowoutsidetheirelements*/overflow:hidden;}

.faderimg{/*Stretchingtheimagestofillwholeelements*/width:100%;height:100%;

/*Preventingblankspacebelowtheimage*/lineheight:0;

/*Aonesecondtransitionwastodisturbingforme*/webkittransition:all0.3sease;moztransition:all0.3sease;otransition:all0.3sease;mstransition:all0.3sease;transition:all0.3sease;}

.faderimg:hover{/*Makingimagesappearbiggerandtransparentonmouseover*/opacity:0.5;width:120%;height:120%;}

.fader.text{/*Placingtextbehindimages*/zindex:10;

/*Positioningtexttopleftconrnerinthemiddleofelements*/position:absolute;top:50%;left:50%;}

.fader.textp{/*Positioningtextcontents50%leftandtoprelativetotextcontainer'stopleftcorner*/margintop:50%;marginleft:50%;}

Suggestion

Insteadof considerusingsomegridsystem.Basedonyourtechnologyofpreference,youcango , , ortheiralternatives.

.fader{inlineblock;}Foundation Susy Masonry

answeredApr2'13at6:25lolmausAndreyMikhaylov8,420 2 24 63

Ilikeusingabackgroundimage.Ifinditeasierandmoreflexible:

DEMO

CSS:

5/30/2015 html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

http://stackoverflow.com/questions/15757036/creatingazoomeffectonanimageonhoverusingcss 4/4

#menu{maxwidth:1200px;textalign:center;margin:auto;}.zoomimg{display:inlineblock;width:250px;height:375px;padding:0px5px0px5px;backgroundsize:100%100%;backgroundrepeat:norepeat;backgroundposition:centercenter;transition:all.5sease;}.zoomimg:hover{cursor:pointer;backgroundsize:150%150%;}.blog{backgroundimage:url(http://s18.postimg.org/il7hbk7i1/image.png);}.music{backgroundimage:url(http://s18.postimg.org/4st2fxgqh/image.png);}.projects{backgroundimage:url(http://s18.postimg.org/sxtrxn115/image.png);}.bio{backgroundimage:url(http://s18.postimg.org/5xn4lb37d/image.png);}

HTML:

DEMO2withOverlay

editedAug1'14at1:38 answeredAug1'14at1:10jme116,025 1 4 17

Iwouldn'trecommendusingabackgroundimageforthis,you'regoingtoloosealltheamazingimagerelatedSEOthatcomeswithusingaimagetagandaltattributes. MitchLayzell Sep1'14at17:54

Ithinkthisisgreat,butyoudolosealltheutilityoftheimgtag. DanielNaab Sep12'14at2:16

webkittransition:all1sease;/*SafariandChrome*/moztransition:all1sease;/*Firefox*/mstransition:all1sease;/*IE9*/otransition:all1sease;/*Opera*/transition:all1sease;

justwanttomakeanoteontheabovetransitionsonlyneed

webkittransition:all1sease;/*SafariandChrome*/transition:all1sease;

andmscertainlydoenstworkforIE9idontknowwhereyougotthatideafrom.

answeredFeb13at10:56DCdaz657 11