CODEWITHSUNDEEP
css
Someone
Someone

Reputation: 438

Images moving when one image is resized (CSS and HTML)

So I have some images that I'm smoothly scaling up on mouse over. It looks great, but I noticed that other images near it are kind of moving to accomodate more or less space when one resizes. I want them to just stay in place. Here is the code:

img
{
width:130;
height:130;
margin:15px;
background-color:transparent;
background-size:100%;

-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
} 

img:hover
{
width:150;
height:150;
margin-left: 0px;
margin-right:0px;
margin-top:0px;
}

Upvotes: 4

Views: 326

Answers (2)

字姓名
字姓名

Reputation: 436

each of this images should be placed in any inline-block container, which has a static width and enougn height for images to scroll up and down. CSS for this container:

.image_container {
    width: 130px;
    height: 145px;/* reserved space for image to scroll up */
    display: inline-block;
}

Upvotes: 2

joar
joar

Reputation: 15947

It's usually kind of hard to expand a child element beyond the bounds of it's parent element without disturbing any siblings of the parent.

I whipped this up just because I wanted to. It uses box-shadow to make it feel like the image it's overlapping the other images, with quite simple CSS3.

It's released under the WTFPL.

http://jsfiddle.net/dWBwW/23/

Upvotes: 0

Related Questions