How can i make image scale on hover inside the container

Motionless Macaque answered on November 9, 2022 Popularity 8/10 Helpfulness 4/10

answer How can i make image scale on hover inside the container

related hover scale img

related css scale image on hover

How can i make image scale on hover inside the container

Comment

.container {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  z-index: 1;
}
.container::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e5e5e5;
  opacity: 0;
  transition: .5s ease all;
}
img {transition: .5s ease all; width: 100%; object-fit:cover;}
.container:hover img {
  transform: scale(1.1);
}

.container:hover::after {opacity: 0.2;}

Popularity 8/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css hover image scale

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Motionless Macaque

0 Answers Avg Quality 2/10

Closely Related Answers

hover scale img

Comment

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
img { vertical-align:middle; }
.box-zoom-out {
    border: 1px solid #CCC;
    height: auto;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    width: 200px;
}
.box-zoom-out img {
    max-width: 100%;
    transition: all 1s;
    -webkit-transform: scale(1);
            transform: scale(1);
}
.box-zoom-out:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box-zoom-out">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
</div>
</body>
</html>

Popularity 9/10 Helpfulness 3/10 Language css

Source: hocwebchuan.com

Tags: css hover hove

Link to this answer
Share Copy Link

Contributed on Nov 09 2022

Homely Hippopotamus

0 Answers Avg Quality 2/10

css scale image on hover

Comment

<!-- HTML -->
<div class="image-container">
  <img src="path/to/image.jpg" alt="Image">
</div>

Popularity 8/10 Helpfulness 1/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

How can i make image scale on hover inside the container

Contents

More Related Answers

How can i make image scale on hover inside the container

Closely Related Answers

hover scale img

css scale image on hover

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.