I remembered seeing a scroll on hover thing on https://candythemes.com/, and thought it was nice, and then last night, someone posted on a FB group about it so I decided to make a tutorial on it.

So here’s how you make a scrolling action happen when you hover your mouse over an element.

First, a sample

Divi - Scroll on hover

Second, the video

Third, the class

Add the custom class of “hover-scroll” (without the quotation marks) to the image module here:

Divi - Scroll on hover

Last, the code

.et_pb_image.hover-scroll {
  width: 100%;
  height: 20rem; /* this is the height of the box */
  overflow: hidden;
  position: relative;
  border: 1px solid black; }
  .et_pb_image.hover-scroll .et_pb_image_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out; }
  .et_pb_image.hover-scroll:hover .et_pb_image_wrap {
    top: 20rem; /* has to be the same */
    transform: translateY(-100%);
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out; }
  @media all and (max-width: 479px) {
    .et_pb_image.hover-scroll {
      border: 0;
      height: auto; }
      .et_pb_image.hover-scroll .et_pb_image_wrap {
        position: relative; } }

Take that code, drop it in anywhere where custom CSS can be included.
– Child theme CSS file
– Divi Theme options page
– WP customization > custom CSS panel
– or lastly, if you want it to work just on a single page, the page builder options.

NOTE: On mobile, the border goes away, and the image is displayed in its full height. Because hover is weird on mobile. If you want this to work on ipads too, change the 479px to 1024px.

update: here’s another sample

Divi - Scroll on hover

Again, the class

This time, add the custom class of “hover-scroll-mockup” (without the quotation marks) to the image module here:

Divi - Scroll on hover

other settings

Add the mockup device (in this case the iMac) as the image, and the long scrolly image as the background as shown below:

Divi - Scroll on hover
Divi - Scroll on hover

the imac

I’m using the iMac as the mockup device. If you want to use other devices, then there will have to be some adjustments. … maybe I’ll get around to it.. and have one where I have all the major devices. I’ve added comments to the CSS so you can adjust some parts to show properly. Have a play with those numbers. And here’s the iMac image I got from https://www.kisspng.com/png-imac-macbook-pro-apple-transparent-969373/ and make it a bit smaller. Go ahead and download that.

Divi - Scroll on hover

Last, the code

.et_pb_image.hover-scroll-mockup {
  background-position: center 15px; /* You might have to adjust the number part to fit the screen */
  border-radius: 10px; /* Because Mac edges are chamfered */
  background-size: cover; 
  position: relative; 
  -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  -ms-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out; }
  .et_pb_image.hover-scroll-mockup:before {
    content: "";
    display: block;
    background: white;
    position: absolute;
    width: 100%;
    height: 30%; /* this should be the height of the stand + chin of the iMac */
    bottom: 0;
    left: 0; } 
  .et_pb_image.hover-scroll-mockup:hover {
    background-position: center 110%; /* Again, here, if the bottom doesn't align properly, adjust the second value a little bit */
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    -ms-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out; }

Take that code, drop it in anywhere where custom CSS can be included.
– Child theme CSS file
– Divi Theme options page
– WP customization > custom CSS panel
– or lastly, if you want it to work just on a single page, the page builder options.

NOTE: On mobile, it’s gonna have to stay there as a whole.. so either make some adjustments, or make this module a desktop-only module (as hover works only on desktop anyways?)

Divi - Scroll on hover To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

If you want to learn how to be a master at CSS in the quickest time possible, sign up for the newsletter below for a great offer on the Beginner’s CSS course for Divi users that is scheduled to come out this month!

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

Photo by Rodolfo Marques on Unsplash