Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
249 views

html5 - Creating A Zoom Effect On An Image On Hover Using CSS - Stack Overflow PDF

The document is a question posted on Stack Overflow asking how to create a zoom effect on an image on hover using CSS. It provides the asker's current HTML and CSS code and asks for help implementing the zoom effect without using tables or div masks. Several responders provide suggestions using CSS transitions and the transform property to scale the images on hover.

Uploaded by

safsdf
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
249 views

html5 - Creating A Zoom Effect On An Image On Hover Using CSS - Stack Overflow PDF

The document is a question posted on Stack Overflow asking how to create a zoom effect on an image on hover using CSS. It provides the asker's current HTML and CSS code and asks for help implementing the zoom effect without using tables or div masks. Several responders provide suggestions using CSS transitions and the transform property to scale the images on hover.

Uploaded by

safsdf
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like