CSS 🔎 Zoom effect when hovering over an image

Share on email
Share on twitter
Share on linkedin
Share on facebook
CSS article - Zoom effect on an image when hovering by @wpr0ck
CSS article - Zoom effect on an image when hovering by @wpr0ck
CSS article - Zoom effect on an image when hovering by @wpr0ck
CSS article - Zoom effect on an image when hovering by @wpr0ck
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

In this article, I share a CSS method to apply a zoom effect to an image when the mouse hovers over it. This effect is triggered when the mouse hovers over the image and the content of the division surrounding the image.

Zoom effect on CSS image: Demonstration

wpRock CSS - Zomm effect on image hover

If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered;)

Zoom effect on CSS image: CSS code / SASS

Below you will find the CSS code and a SASS version that allows you to obtain the zoom effect on the images when hovering.

/**
 * ZOOM IMAGE EFFECT ON HOVER // wpRock.fr
 */

.wprock-img-zoom-hover .wprock-img-zoom {
    overflow: hidden;
    position: relative; 
}

.wprock-img-zoom-hover .wprock-img-zoom img {
    max-width: 100%;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.wprock-img-zoom-hover .wprock-img-zoom * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.wprock-img-zoom-hover:hover .wprock-img-zoom img {
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}
/**
 * ZOOM IMAGE EFFECT ON HOVER // wpRock.fr
 */

 .wprock-img-zoom-hover {

	.wprock-img-zoom {

		overflow: hidden;
		position: relative;

		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		img {
			max-width: 100%;
			transition: all 0.8s;
		}
	}

	&:hover {
		.wprock-img-zoom {
			img {
				transform: scale(1.06);
			}
		}
	}
}

Zoom effect on CSS image: HTML code

Here is an example of the HTML code that allows you to implement this effect. Hovering over any element contained in the div having the class ". wpRock-img-zoom-hover", a zoom effect is applied to all images present in the div having the class". wpRock-img-zoom".

wpRock CSS - Zomm effect on image hover

If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)

Zoom effect on CSS image: HTML / CSS code

Finally, I propose a complete functional example below.



    
        
        
        

    
    
        
        
wpRock CSS - Zomm effect on image hover

If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)

Julien MA Jacob
WordPress Developer
Julien MA JACOB - WordPress Developer
Passionate about the web and programming with always many projects in mind
  Discussion of the article
Subscribe to the newsletter
Notify to
guest
0 Comments
Inline Feedbacks
View all comments