Simple Rollover Zoom Tile

Time: 10min

Tools: Elementor Pro, CSS, JS

One of my favorite museum websites is for a mediumish museum with a fabulous collection in Norfolk, Virginia: The Chrysler Museum.

A relatively minor new addition to the site are these subtle interactive tiles that zoom slightly when you rollover the content. It’s a nice touch that adds a lot of movement with relatively little work on the designer’s part. Let’s get started! 

A quick example of what we’ll be making. (Don’t worry, you can use whatever image you want):

Plan your visit today

An exhibition like nothing you’ve experienced before

Obviously it would be easier to do this with straight code, but so many people are using Elementor now that I’m going to show you how to get it done with this popular page builder.

You’ll want to adjust the setup for use in your space, but for this exercise, let’s start with an Inner Section Element. I’ve use a single column but you can do this with as many columns as you want, just remember that you’ll need to adjust some of the code to work for you. 

Let’s add some text, then adjust the padding around the frame. I’m going to add the padding here instead of the column so that the hover effects are uniform.

Now that the text is settled, let’s take care of the background image. The good thing is that Elementor provides simple background and overlay tools so we’ll use those for the opacity hover and background image. You’ll want to play around with the opacity settings for the image you use, this one is light so I can turn up the darkness.

Time to move on to some minor CSS tweaks for movement. You can reuse the classes for each of your columns if you’re using this in multiple locations and the images are the same ratios. 

The image I’m using has a horizontal ratio so my background size value is set at a percentage for X but auto for Y since I need it to fill out the height of the frame. You’ll reverse that with a vertical ratio image. You can also adjust how much you want it to zoom by replacing the percentage in the :hover code. 

Here’s the CSS you’ll need:

.move-txt{left:0;}

.enlarge-bg .elementor-column-wrap{background-size:100% auto;}

.move-txt:hover{transition:all .2s ease-in-out;left:20px;}

.enlarge-bg .elementor-column-wrap:hover{transition:background-size .2s ease;background-size:130% auto;}

I added this in the Inner Section Custom CSS area so that it covers everything contained in the block. Now you’ll need to go through and add class names to each of the sections: the column and the text area. I’ve named the Text Editor class move-txt and the column enlarge-bg. If you’re not familiar with these, they are located under the Advanced tab.

Add CSS here.
Add class for enlarging the background image.
Add class for the text.

Ok, so now you should have movement and zoom for the tile, which looks great, but what if you want to have a link. You don’t necessarily want to link the text, although that is an option.

A better solution would be to make the entire tile clickable. Unfortunately this isn’t a native function in Elementor so we’re going to need a tiny jQuery script to add this functionality. There are plugins that do this as well, but it seems like overkill when a few lines of code can do the same thing.

Drag an HTML element anywhere on your page, then paste in:

<script>
jQuery("#clickable-home-column").click(function() {
    window.location = "http://google.com";
    return false;
});
</script>
Make sure you name the #clickable-home-column id something distinct because this code will add a link to any column with this id on this page. Now go back into the Inner Section and add clickable-home-column (or whatever name you chose) to the CSS ID under Advanced in the Advanced Tab.  

One more fairly minor tweak is to add a pointer to the :hover state of the tile. To do that, simply pop this into your existing CSS. Just make sure to change the ID if you’re using  different names for your tiles.

#clickable-home-column:hover{cursor:pointer;}

That’s it. Hope you enjoy your new interactive tile. Let me know if you found a better way to deal with this below.

If you liked it, share it

Facebook
Twitter
LinkedIn

What do you think?