CODEWITHSUNDEEP
htmlcssimage
John Smith
John Smith

Reputation: 35

expand an images padding over other elements using only CSS

I have a gallery of images. When you hover over an image the padding expands and it gets a shadow effect.

Is it possible to have the padding expand over the other images? So the change in the padding does not distort any other thing on the page?

Here is the code I have -- http://jsfiddle.net/U6VNx/ --

CSS

div.gallery {margin:0 auto; width:900px;}

div.images {text-align:center; width:900px;}

div.images a {width:259px; height:254px; }

div.images a img {padding:5px; transition:padding .5s, box-shadow .5s;}

div.images a img:hover {padding:20px; box-shadow:0 0 8px #000000; overflow:hidden;}

Thanks in advance.

Upvotes: 1

Views: 423

Answers (1)

C3roe
C3roe

Reputation: 96241

For your simple example, you could just use a margin:-15px for the hovered images, and have that transitioned as well:

div.images a img {padding:5px; transition:margin .5s, padding .5s, box-shadow .5s;}
div.images a img:hover {margin:-15px; padding:20px;}

http://jsfiddle.net/U6VNx/2/

Upvotes: 2

Related Questions