How to Scale Images and Background Images on Hover
In this snippet, we will learn how to zoom/scale an element, particularly images and background images on hover with pure CSS. This kind of effect is prominently used in galleries, selling products and portfolio-type cases where the design has a purpose of showing both visual and informational details.
Solutions with CSS properties
To have a zoom effect, you need to use the CSS transform property with your preferred scale amount. It allows managing the enlargement of the picture. CSS animations benefit from hardware acceleration and as a result, seem flatter than other ways of animating.
You can use pseudo-elements such as ::before to add a color overlay. Then, the child element will display a color overlay when you hover on the parent element! And in the end, we're going to cover how to add text to our overlay. It can be done by setting the text in a <span> or <a> tag making it visible only when hovered.
Example of adding a zoom-in effect on hover with a text:
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
margin: 0px;
padding: 0px;
}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.container {
width: 45%;
margin: 20px;
height: 300px;
border: 3px solid #eee;
overflow: hidden;
position: relative;
float: left;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg-one {
background-image: url(http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg);
}
.bg-two {
background-image: url(https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg);
}
span {
display: none;
font-size: 35px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
text-decoration: none;
}
.container:hover .child,
.container:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.container:hover .child:before,
.container:focus .child:before {
display: block;
}
.container:hover span,
.container:focus span {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52, 73, 94, 0.75);
}
@media screen and (max-width: 960px) {
.container {
width: 100%;
margin: 20px 0;
}
.wrapper {
padding: 20px;
}
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="wrapper">
<div class="container">
<div class="child bg-one">
<span>London</span>
</div>
</div>
<div class="container">
<div class="child bg-two">
<span>New York</span>
</div>
</div>
</div>
</body>
</html>Result
Hover over the images to see the effect.
London
The recommended size is transform: scale (1.5), which makes a 150% zoom effect. If the zoom is too large, it will go outside of the viewport.
See another example where the <img> tag is used, and the zoom effect is on it. The images are inserted in a list so that you can have a gallery effect.
Example of adding a zoom-in effect on hover to the <img> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
margin: 50px 20px;
list-style: none;
}
ul li {
margin: 5px;
display: inline-block;
padding: 5px;
border: 1px solid #f2f2f2;
}
ul li img {
width: 125px;
height: 125px;
display: block;
}
ul li:hover img {
transform: scale(1.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<ul>
<li>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</li>
<li>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</li>
<li>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</li>
</ul>
</body>
</html>Here see another example which contains several zoom effects on hover: zoom in, zoom out, slide, rotate, blur, grayscale, sepia and blur+grayscale.
Example of adding various zoom effects on hover:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
margin: 30px 15px 0;
font-weight: 300;
}
h2 {
margin: 60px 15px 0;
padding: 0;
font-weight: 300;
}
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Zoom In #1 */
.hover01 figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Zoom In #2 */
.hover02 figure img {
width: 300px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover02 figure:hover img {
width: 350px;
}
/* Zoom Out #1 */
.hover03 figure img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover03 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
/* Zoom Out #2 */
.hover04 figure img {
width: 400px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover04 figure:hover img {
width: 300px;
}
/* Slide */
.hover05 figure img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover05 figure:hover img {
margin-left: 0;
}
/* Rotate */
.hover06 figure img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover06 figure:hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
/* Blur */
.hover07 figure img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover07 figure:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
/* Gray Scale */
.hover08 figure img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover08 figure:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* Sepia */
.hover09 figure img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover09 figure:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
/* Blur + Gray Scale */
.hover10 figure img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover10 figure:hover img {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
</style>
</head>
<body>
<h1>Hover over the images to see the effect</h1>
<h2 id="demo01">1. Zoom In #1</h2>
<div class="hover01 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom in one" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo02">2. Zoom In #2</h2>
<div class="hover02 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom in two" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo03">3. Zoom Out #1</h2>
<div class="hover03 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom out one" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo04">4. Zoom Out #2</h2>
<div class="hover04 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Zoom out two" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo05">5. Slide</h2>
<div class="hover05 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Slide" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo06">6. Rotate<small>(+Zoom Out)</small></h2>
<div class="hover06 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Rotate" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo07">7. Blur</h2>
<div class="hover07 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Blur" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo08">8. Gray Scale</h2>
<div class="hover08 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Gray Scale" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo09">9. Sepia</h2>
<div class="hover09 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Sepia" />
</figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo10">10. Blur + Gray Scale</h2>
<div class="hover10 column">
<div>
<figure>
<img src="/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png" alt="Blur and Gray Scale" />
</figure>
<span>Hover</span>
</div>
</div>
</body>
</html>Example of zooming in the background image on hover:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
width: 300px;
height: 200px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
cursor: pointer;
}
.content div {
width: 100%;
height: 100%;
background: url("http://w3docs.com/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all 1s;
}
.content div:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<div></div>
</div>
</body>
</html>Example of creating a quick zoom-in effect on hover:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
overflow: hidden;
height: 400px;
}
.zoom {
height: 400px;
position: relative;
text-align: center;
cursor: pointer;
margin-bottom: 10px;
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg');
-webkit-transition: all 0.3s ease-in-out;
}
.zoom:hover {
-webkit-transform: scale(1.6, 1.6);
transform: scale(1.6, 1.6);
-webkit-transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<div class="zoom"></div>
</div>
</body>
</html>Example of adding a zoom-in effect with rotation on hover:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
width: 360px;
height: 360px;
overflow: hidden;
cursor: pointer;
}
.content img {
transition: transform .5s ease-in-out;
}
/* The Transformation */
.content:hover img {
transform: scale(2) rotate(35deg);
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<img src="/uploads/media/default/0001/05/6b9dca3dac1686cb8c6bb4bdc3c26cb17ec0b970.png" alt="Image" />
</div>
</body>
</html>Example of adding a zoom-in effect with a pointer on hover:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
width: 600px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
.content img {
max-width: 100%;
transform-origin: 65% 75%;
transition: transform 1s, filter .5s ease-out;
}
/* The Transformation */
.content:hover img {
transform: scale(5);
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<img src="https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="Example image" />
</div>
</body>
</html>Example of creating a zoom-in effect with slow-motion on hover:
<!DOCTYPE html>
<html>
<head>
<style>
.content {
width: 600px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
.content img {
max-width: 100%;
transform-origin: 50% 65%;
transition: transform 5s, filter 3s ease-in-out;
filter: brightness(150%);
}
/* The Transformation */
.content:hover img {
filter: brightness(100%);
transform: scale(3);
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<img src="https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="Example image" />
</div>
</body>
</html>