effect Tag

Today I will show you comment create a zoom effect on an image in CSS. The idea is to give your web pages a bit of dynamism to get through this easy-to-set-up effect, which gives the impression of immersing yourself in a photo when hovering over it.

This can, for example, be used to value a clickable image, by showing the Internet user that something is happening when he passes the mouse over this specific visual or when he taps the screen on a mobile. On WordPress, this is actually used on category pages, for the purpose of valid post thumbnails.

Here is an example of zooming in with the view:

Create a zoom effect in CSS: general principle

The principle is simple to understand: we will “enclose the image” in a box… and zoom inside this box (as you can see with the example above, the image itself does not move on the page, does not expand on the page, it remains in the same space).

To handle all of this, we’ll use the CSS languagereference language for the formatting of web pages… and more claimed properties of the CSS3 language.

Firstly there is I owned it “transform”, which allows you to change the perspective of a visual or just rotate. It is compatible with name browsers:

We will combine this property with I owned it “transition”, which allows you to control the speed of the animation that will be produced, a story of fluid, progressive rendering, with a brutal and instantaneous zoom. Even chosen, transitions are compatible with browser names:

The CSS language has the advantage of being very open (the compatibility is wide), of not weighing down the web page significantly, unlike the effects managed in JavaScript, which can be more resource intensive.

Adding the zoom effect to an image in CSS: code to use

Depending on your situation, you will either:

• Occasionally animate a single imagealthough you can consider renting the CSS code directly on the page in question;
• Animate a set of similar images (e.g. all thumbnails of your articles inside a topic), although it will be almost better to rent the code in your site’s overall stylesheet.

Adding a zoom effect It will be broken down into 2 stages: on board, we all believe in a “boy” who will come to take care of the images on the images we want to apply the effect (with the HTML language); Next, we will define the animation that is developed in the box (with the CSS).

Enclose the image in a container

To begin with, you need to target the image or images to apply the zoom effect to.

South WordPress, you code your image in HTML usually looks like this (when you insert an image in an article for example):

<img src="https://www.notuxedo.com/wp-content/uploads/2022/04/effet-zoom-image-css.jpg" alt="Créer un effet de zoom sur une image en CSS" width="930" height="622" class="size-full wp-image-32416" />

You have the image link, the alt text that describes the image, its size (width and height) and “classes” that determine its formatting. If you don’t use WordPress, you can sometimes join much simpler version of the code thiswith only the image link, which is the only mandatory element.

<img src="https://www.notuxedo.com/wp-content/uploads/2022/04/effet-zoom-image-css.jpg" />

If you’re on the train modify a WordPress themeyou might have chosen something like:

<?php $post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'montheme' ); ?>

This is a dynamic function that automatically retrieves the link from the “post thumbnail”, this is the thumbnail associated with an article. In WordPress, there are plenty of dynamic functions like this and when you try to modify your site for the first time, you have to do a little investigative work to try to understand “which function controls what” and find out at what place edit code.

For the example, I’m going to take an image that I insert into an article… like this cat:

At this stage, as you can check, no animation, no zoom on the image. The image link looks like this:

<img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" />

Without touching this link, I will “The Nurse in a Box”, which you will call “zoom-image”. Take a good look below, there already both a part that precedes the image link (<div class="zoom-image">) but also a part that fits the image link (</div>). We literally ill see the image in this box.

<div class="zoom-image"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

Set image zoom effect in CSS

We will now create css code which defines what goes into the box. I’ll give you the full code… and then I’ll break it down to you!

.zoom-image {overflow:hidden}
.zoom-image img {width:100%;height:auto}
.zoom-image img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}

The first online “.zoom-image” Determine that the image of the box in the way visible by zooming is not visible. In other words, if it overflows because it is enlarged (“overflow” means “overflow” in English), this overflow must be hidden (“hidden”).

The .zoom-image img line indicate that this time, we are interested in the image (“img”) found inside the “zoom-image” box: we force this image to occupy 100% of the available surface in the box (and on request that its height adapts accordingly!). Also, when zooming, you are sure that the image does not change after the tail.

The line .zoom-image img:hover Indicate what happens when you hover over the image (“hover” = hover in English). And precisely, what is happening?

• width:100% : Image maintains 100% width, it does not change except for the tail, it zooms in more than it affects the aspect ratio of the image.
• -webkit-transform and transform : it is the famous “transform” property which defines the type of animation performed. On the writing in two different ways (with and without “webkit”) to maximize compatibility with different browsers, both on Mac and PC. Here, the chosen effect is a modification of the scale of the image (“scale” = scale). In other words, a zoom effect. We multiply by 1.3 the size of the image (we could have chosen something else).
• -webkit-transition and transition : this is the property that determines the “fluidity” of the zoom effect. Here, we use the “easy-in-out”, a type of transition slow at the beginning, slow at the end for maximum fluidity… and we opt for an effect of 0.5 seconds. We could have chosen another type of transition, such as “ease-out” (fast start, slow until the end), “linear” (constant speed) or “ease-in” (slow start, fast until the end). end).

The cat image now has zoom:

If you have completed the transition, how can you confirm that it looks more “rough” beautiful.

For what purpose do you insert the CSS code?

If you add a zoom effect on an image in CSS in one place (on a page for example), you can simply copy the code from the body of your article, instead between “style” tags eat this:

<style type="text/css">.zoom-image {overflow:hidden}
.zoom-image img {width:100%;height:auto}
.zoom-image img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}</style>

If you plan to use this effect on several images, it is best to copy it to the style sheet which controls the appearance of your site. On WordPress, here is an example of the “style.css” file of your theme or child theme. In this case, no need for “style” tags, you can directly copy this piece of code:

.zoom-image {overflow:hidden}
.zoom-image img {width:100%;height:auto}
.zoom-image img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}

Creative variants of the zoom effect

You can perform some pretty cool variants of the zoom effect on an image, in combining it with other css effectsfor example color, blur or rotation.

Zoom in on a specific area of ​​the image

We reproduce the same principle: this time, I call my “box” zoom-zone, my image is therefore presented like this:

<div class="zoom-zone"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

And this time, the CSS code does two things:

• In the image itself, I determine where to orient the zoom on a horizontal axis and on a vertical axis (using two percentages).
• When hovering over the image, I change the scale (“scale”) but this time with a coarse x4 zoom and I keep a small fluid transition effect.

Which gives this:

.zoom-zone {overflow:hidden}
.zoom-zone img {width:100%;height:auto;transform-origin:60% 50%}
.zoom-zone img:hover {-webkit-transform:scale(4);transform:scale(4);-webkit-transition:transform 1s,.5s ease-in-out;transition:transform 1s,.5s ease-in-out}

Zoom and color the picture

Can also combine zoom and play on color. This time, I call my box “color-zoom”.

<div class="zoom-couleur"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

And I build my CSS code by adding:

• On the picture itselfa filter that caches the color and image in grayscale (“grayscale”).
• On hoverwe cancel this grayscale filter by setting it to zero so that the image regains its color, in addition to keeping a x1.2 zoom effect.

.zoom-couleur {overflow:hidden}
.zoom-couleur img {width:100%;height:auto;filter:grayscale(100%)}
.zoom-couleur img:hover{width:100%;-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}

Zoom and sharpen the image

Another example: display a floating image, which will become clear when zoomed in. Same logic, I name my box “zoom-blur”.

<div class="zoom-flou"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

And I put in my CSS code:

• On the image, a filter that creates a blur effect. The higher the number in parentheses, the fuzzier it is.
• On hoversame principle as for the color, I cancel the filter that causes the blur and I keep my zoom effect.

.zoom-flou {overflow:hidden}
.zoom-flou img {width:100%;height:auto;filter:blur(5px)}
.zoom-flou img:hover {filter:blur(0);-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}

Zoom with a rotation effect

Come on, a little last one for the road with this “zoom-rotation”!

<div class="zoom-rotation"><img src="https://www.notuxedo.com/wp-content/uploads/2022/04/chat-exemple.jpg" alt="Chat exemple" width="930" height="620" class="alignnone size-full wp-image-32448" /></div>

For the CSS code, this time we apply an effect only when hovering. With the combination of x1.8 zoom and 45 degree rotation, it tells many that the spin is done in an anti-clockwise direction.

.zoom-rotation {overflow:hidden}
.zoom-rotation img {width:100%;height:auto}
.zoom-rotation img:hover {width:100%;-webkit-transform:scale(1.8) rotate(-45deg);transform:scale(1.8) rotate(-45deg)}

If you want to see an example of the zoom effect “in action”, use it on my travel blog’s home page to highlight the different destinations.

---