CODEWITHSUNDEEP
htmlcssimageresize
Toke Juhoklee Kejlow Nielsen
Toke Juhoklee Kejlow Nielsen

Reputation: 45

Resizing img hover from center and out instead of left side and out

When I resize my image with the :hover property it does get larger, but it resizes from the left and out, instead of from the center and out...

My code HTML:

<a href=""><img src="cover (1).jpg"class="cover"><a>
<a href=""><img src="cover (2).jpg"class="cover"><a>
<a href=""><img src="cover (3).jpg"class="cover"><a>
<a href=""><img src="cover (4).jpg"class="cover"><a>

CSS:

img.cover{
height:100px;
Width:100px;
padding-top:25px;
position:relative;
left:290px; 
}

img.cover:hover {
height:150px; 
width:150px;
margin-top:-25px;
vertical-align:top;
position:relative;
-webkit-transition:  2s; /* Safari and Chrome */

}

Upvotes: 1

Views: 3729

Answers (4)

cmw
cmw

Reputation: 855

If you know in all instances what the dimensions of your images are going to be, you can accomplish this by displaying the image as a block element and changing the padding as well as dimensions on hover.

CSS:

a img {
    display: block;
    width: 100px;
    height: 100px;
    padding: 25px;
    background-color: red;
}

a img:hover {
    width: 150px;
    height: 150px;
    padding: 0;
}

HTML: 

<a href=""><img src="" /></a>
<a href=""><img src="" /></a>
<a href=""><img src="" /></a>

Here is a demo on jsfiddle:

http://jsfiddle.net/5dMbt/

Upvotes: 1

Paulooze
Paulooze

Reputation: 1237

Try this, maybe this is the effect you want to achieve...

img.cover:hover {
margin-left: -25px;
margin-right: -25px;
}

Upvotes: 1

kirilloid
kirilloid

Reputation: 14304

Add either margin-top:-25px; or left:265px; to img.cover:hover

Upvotes: 0

Trent
Trent

Reputation: 109

You'll need to adjust the left and top properties in your .hover css. Try:

left:-25px;
right:-25px;

Upvotes: 0

Related Questions