Change the image size on hover without changing the parent div's size

Question

I have a question. I need to change the image size on hover without changing the parent div's size. Also, I have some

tags inside the same div with the image. When I add hover on image and give some pxs to width and height, the

tags move with the image.

img {
    width: 200px;
    height: 200px;
}

img:hover {
    width: 250px;
    height: 250px;
    overflow: hidden;
}

user_10867454 · Answer

You don't need to alter your HTML - just scale the img on hover rather than alter its width and height. Scaling will not affect the positioning of other elements as the scaled element keeps its original size as far as they are concerned.

img {
  width: 200px;
  height: 200px;
}

img:hover {
  /*width: 250px;
    height: 250px;*/
  transform: scale(1.25);/* added */
  overflow: hidden;
}


  
    
    
      Ваш товар
      $89.00

user_14957455 · Answer

you can do this by using the transform property

.product-items{
    width: 200px;
    height: 200px;
}

.img-div{
    height: 100px;
    width: 100%;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    transition: 0.4s;
}
div:hover img {
    transform: scale(1.2,1.2);
}

user_6046037 · Answer

You can try add container on image and set position:relative and for img position:absolute

.img-container {
  width: 200px;
  height: 200px;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
}
img:hover {
  width: 250px;
  height: 250px;
  overflow: hidden;
}

Change the image size on hover without changing the parent div's size

3 Answers