Zooming Background Images Using CSS3

Zooming Background Images Using CSS3


Zooming Background Images Using CSS3

This lesson Zooming Background Images Using CSS3 we are going to learn how to zooming the background images, while working on a client’s website recently, I was asked to replicate an effect like this.
These kind of effects are notably used in portfolio-type situations where the design intends to show both visual and informational details.
There are many different possible methods – Zooming Background Images Using CSS3
There are many options to do this effects in many ways, like we can use JQuery and it is definitely not an light weight various. Another option was to position an <img> within the container and manipulate it with CSS. There could be some potential benefits here, like being able to set the source with srcset so that the image used is performance and device-appropriate.
Zooming Background Images Using CSS3
In my situation, I wanted to manage the effect entirely in CSS, so I went for that.
Basic Functionality – Zooming Background Images Using CSS3
In order to achieve optimal performance, I decided to use the CSS transform property to handle the enlargement of the image. (CSS animations benefit from hardware acceleration and as a result appear smoother than other methods of animating.)
Rather than an <img>, I used an additional <div> inside the parent to act as the image. The structure being:
First we specify the dimensions for the parent element. Then the child can fill the parent using width: 100% and height: 100%;, as well as set the background image, ensuring it scales to cover the area.

We then add hover effects to our parent element which will affect our child element. A focus style is good for accessibility as well:

You may want to use a tool for adding prefixes for the best possible browser support.

To finish up the basic effect, we can add some transitions to our child element’s normal state:

If you want to add a color overlay, you can make use of pseudo elements like ::before:

Now when we hover on the parent element, the child element should show a color overlay!
Finally, we’ll cover how to add some text to show on our overlay. We can add an element to our current child element like so:

We can give our some style:

and we can make it visible only when we hover on the .parent:

See the Pen Zooming Images by Santhoshkumar Sakthivel (@san2shkumar) on CodePen.

Zooming Background Images Using CSS3
Mobile Support – Zooming Background Images Using CSS3
If the containers are links and the hover states don’t reveal any essential information, you might just leave it alone.
If the hover states are important, in order for this to work on touch screens, we can use empty onclick=”” handlers on our .parent containers. Unfortunately I couldn’t come across another way of doing this but if any of you do, let me know in the comments!

We hope the above lesson is helpful to make your portfolio more effective using CSS3

Leave a Reply