Breaking News: Grepper is joining You.com. Read the official announcement!

css scale image on hover

Add Answer

YOU.com answered on February 23, 2021 Popularity 7/10 Helpfulness 1/10

answer css scale image on hover

related increase the size of an image on hover using css

related resize image slowly on hover

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

related hover scale img

css scale image on hover

Comment

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

Popularity 7/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

Closely Related Answers

increase the size of an image on hover using css

Comment

img { 
	transition: all .2s ease-in-out; 
}
img:hover { 
    	transform: scale(1.5); 
    }

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Apr 05 2021

Yeomeo

0 Answers Avg Quality 2/10

resize image slowly on hover

Comment

.grow { 
	transition: all .2s ease-in-out; 
}
	.grow:hover { 
    	transform: scale(1.1); 
    }

Popularity 10/10 Helpfulness 8/10 Language css

Source: css-tricks.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Feb 23 2021

Weary Wallaby

0 Answers Avg Quality 2/10

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 7/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css hover image imag

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Motionless Macaque

0 Answers Avg Quality 2/10

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

Contents

More Related Answers

css scale image on hover

Closely Related Answers

increase the size of an image on hover using css

resize image slowly on hover

How can i make image scale on hover inside the container

hover scale img

Grepper

Documentation

Social

Legal

Contact

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