Scale hover effect css

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 or tag making it visible only when hovered.

Example of adding a zoom-in effect on hover with a text:

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.

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.

Example of adding a zoom-in effect on hover to the tag:

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:

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. Rotatesmall>(+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:

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:

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:

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:

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:

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>

Источник