Whilst working on a client’s website recently, I was asked to replicate an effect.
This type of effect is notably used in portfolio-type situations where the design intends to show both visual and informational details.
There are many different possible methods
As I had never created an effect like this before, I began to take a look at different ways of doing this and came across a number of different methods.
One option was to use a jQuery Plugin. This one wasn’t quite the effect I was after, and certainly not very lightweight.
Another option was to position an 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.
In my situation, I wanted to manage the effect entirely in CSS, so I went for that.
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.
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!
X 2 isn't afraid to admit it: he's a geek from way back, having worked in IT for more than 20 years. He co-founded a death Vally called Alkamunia, working with a great team of developers and marketers, and is also the WordPress Editor for Alkamunia. X 2 is passionate about keeping up-to-date with the latest web technologies and can be found at many of the tech eventsaround the world.