CODEWITHSUNDEEP
csshtmlhover
bertassa
bertassa

Reputation: 685

How to stop div from moving with on hover

I want to increase the size of some images when hovering over them. Please have a look at the example below. It's the option Test (3rd image):

http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html

.swatches-container .swatch-img,
.swatches-container .swatch-span {
  margin:0 2px 2px 0;
}

.swatches-container .swatch-img {
  border:1px solid #eee;
  max-width:30px;
  max-height:28px;
  z-index: 0;
  position: relative;
}

.swatches-container .swatch-img.current {
  border:2px solid #333;
}

.swatches-container .swatch-span {}

.swatch-img:hover {
  border:1px solid #eee;
  max-width:60px;
  max-height:46px;
  left:10px;
  cursor:pointer;
  top: -20px;
  left: -20px;
}

The problem I have is that when I hover over the third image, the div moves. How can I prevent this from happening? Thanks

Upvotes: 2

Views: 12311

Answers (2)

Levans
Levans

Reputation: 14992

The deal is that you need to have your images positioned as absolute, so that the swatches-container is not resized if they get bigger.

Thus, you can put your images into a <div class="swatch-img-block"></div> which keep having the size of the little image, so the flow isn't modified by your growing image and your images will be absolute positioned relatively to these <div>

You can do this with this CSS: 

.swatches-container .swatch-img-block
{
    display:inline-block; /* displayed as inline elements */
    position: relative; /* so the images can be positioned relatively to this */
    width:30px; /* keeping the image size */
    height:28px;
}

and by adding position:absolute in .swatch-img:hover{ }.

EDIT: looks like for compatibility issues, it is better to replace .swatch-img:hover selector by .swatch-img-block:hover .swatch-img. This way, the image is made bigger if the pointer is on the <div> containing the image (the space of the image when it is little). Also, it avoids problems with images moving out of the pointer.

Here is a working jsFiddle : LINK

Upvotes: 2

Chtioui Malek
Chtioui Malek

Reputation: 11515

you can set the img to absolute positionning when hovered, also the swatches-container have to be relatively positioned :

.swatches-container
{
  position:relative;
}
.swatch-img:hover {
  position:absolute;
}

Upvotes: 1

Related Questions