signup

StackOverflowisaquestionandanswersiteforprofessionalandenthusiastprogrammers.It's100%free,no
registrationrequired.

login

tour

html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

5/30/2015

help

stackoverflowcareers

Takethe2minutetour

CreatingaZoomEffectonanimageonhoverusingCSS?

I'mcurrentlytryingtocreateazoomeffectonhoveroveroneofmyfourimages.Theproblemismostexamplesusuallyusetablesormask
divstoapplysomesortofeffect.
Here'soneexamplethatimplementswhatIwouldlikethis .
This ismycodesofar.
Thankssomuch!!

HTML
<divid="menu">
<imgclass="blog"src="http://s18.postimg.org/il7hbk7i1/image.png"alt="">
<imgclass="music"src="http://s18.postimg.org/4st2fxgqh/image.png"alt="">
<imgclass="projects"src="http://s18.postimg.org/sxtrxn115/image.png"alt="">
<imgclass="bio"src="http://s18.postimg.org/5xn4lb37d/image.png"alt="">
</div>

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:29
neshpro9
394

askedApr2'13at5:49
KingPolygon

15

1,043

11

34

voteupforthelinkyouposted,ithelpedme:)neshpro9Dec26'13at6:16

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

1/4

5/30/2015

html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

Whataboutusing CSS3transform propertyanduse scale whichillgiveazoomlikeeffect,this

canbedonelikeso,
HTML
<divclass="thumbnail">
<divclass="image">
<imgsrc="http://placehold.it/320x240"alt="Someawesometext"/>
</div>
</div>

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'sademofiddle.Iremovedsomeoftheelementtomakeitsimpler,youcanalwaysadd
overflowhiddentothe .image tohidetheoverflowofthescaledimage.
zoom

propertyonlyworksinIE

editedAug1'14at0:49

answeredApr2'13at6:33
MitchLayzell
1,406

20

5 Andwinningthe"deeplifelessonsfromcode"award,yourCSSischanting"Allisease,allisease."
NerrolkenNov1'14at0:15

Hereyougo.

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

HTML
<divid="menu">
<divclass="fader">
<divclass="text">
<p>Yay!</p>
</div>
<ahref="http://stackoverflow.com/questions/15732643/jquerymasonryandcss3/">
<imgclass="blog"src="http://s18.postimg.org/il7hbk7i1/image.png"alt="">
</a>
</div>
<divclass="fader">
<divclass="text">
<p>Yay!</p>
</div>
<ahref="http://stackoverflow.com/questions/15732643/jquerymasonryandcss3/">
<imgclass="blog"src="http://s18.postimg.org/4st2fxgqh/image.png"alt="">
</a>
</div>
<divclass="fader">
<divclass="text">

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

2/4

5/30/2015

html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

<p>Yay!</p>
</div>
<ahref="http://stackoverflow.com/questions/15732643/jquerymasonryandcss3/">
<imgclass="projects"src="http://s18.postimg.org/sxtrxn115/image.png"
alt="">
</a>
</div>
<divclass="fader">
<divclass="text">
<p>Yay!</p>
</div>
<ahref="http://stackoverflow.com/questions/15732643/jquerymasonryandcss3/">
<imgclass="blog"src="http://s18.postimg.org/5xn4lb37d/image.png"alt="">
</a>
</div>
</div>

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%leftandtoprelative
totextcontainer'stopleftcorner*/
margintop:50%;
marginleft:50%;}

Suggestion
Insteadof .fader{inlineblock;} considerusingsomegridsystem.Basedonyour
technologyofpreference,youcangoFoundation,Susy ,Masonry ortheiralternatives.
answeredApr2'13at6:25
lolmausAndreyMikhaylov
8,420

24

63

Ilikeusingabackgroundimage.Ifinditeasierandmoreflexible:

DEMO
CSS:

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

3/4

5/30/2015

html5CreatingaZoomEffectonanimageonhoverusingCSS?StackOverflow

#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:
<divid="menu">
<divclass="blogzoomimg"></div>
<divclass="musiczoomimg"></div>
<divclass="projectszoomimg"></div>
<divclass="biozoomimg"></div>
</div>

DEMO2withOverlay
editedAug1'14at1:38

answeredAug1'14at1:10
jme11
6,025

17

Iwouldn'trecommendusingabackgroundimageforthis,you'regoingtoloosealltheamazingimage
relatedSEOthatcomeswithusingaimagetagandaltattributes.MitchLayzellSep1'14at17:54
Ithinkthisisgreat,butyoudolosealltheutilityoftheimgtag.DanielNaabSep12'14at2:16

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

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

andmscertainlydoenstworkforIE9idontknowwhereyougotthatideafrom.
answeredFeb13at10:56
DCdaz
657

11

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

4/4