Site Loader
Get a Quote

In this tutorial, we will show you how to use CSS3 to achieve the image scroll down hover effect in Gutenberg editor of WordPress 5.1.  You do not have to install any plugin or use any visual theme builder here.

What you need to do is to add a few CSS3 codes into the Additional CSS section of your theme.  You can go to the WordPress Dashboard > Appearance > Customization > Additional CSS.

You can use this image scroll down hover effect to showcase your portfolio. If you are using Divi Theme, you can skip this tutorial and follow the steps here.

Step 1: Add additional CSS codes

To do this effect, we need to include two codes, one is for the image wrapper, and another one is for the image translation.

This is the CSS code for image wrapper. We give it an additional CSS class of .slideup here.

figure.wp-block-image.slideup {
    overflow: hidden;
    height: 400px;
}

You can change the height of the image wrapper. Once you have to change it to another value, you need to change the margin-top value in the code below.

This is the code for the translation effect of the image. You can define the translation time and function. For more timing function you can refer it here.

figure.wp-block-image.slideup img:hover {
    margin-top: 400px;
    transform: translate(0,-100%);
    transition-timing-function: ease;
    transition-duration: 3s;
}

After you have added above codes, save it by publishing it.

Step 2: Add your image

Next, create a new post and add the image to the post in your Gutenberg editor.

In the Block section, set the image size to Full Size. Expand the Advanced section, under the Additional CSS Class, type in the “slideup”. That’s all. We are done here. Publish your post and you can see the image scrolling when hovering the image.

Effect Example:

Share

Post Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *

×

Hello! Click one of our representatives below to chat on WhatsApp.

×