Tutorial & code

Image Scroll on Hover

A simple CSS effect often used on website portfolios. A long image is set to shows only the top part, but on hover scrolls to show the rest.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1



This is a simple CSS solution.

  1.  The CSS is contained in the Row setting under the Advanced Tab. You can move this to a central location for all your CSS.
  2. The individual Photo Modules need the class of “scrolling-image” adding under the Advanced Tab.

Beaver Builder Scrolling Images

See the Image Scroll on Hover template in action.



"scrolling-image" needs to be added to each photo module
under the advanced tab as a class

.scrolling-image .fl-module-content{
overflow: hidden;
height: 300px; /* change this for height of image*/

.scrolling-image img:hover {
margin-top: 300px; /* needs to match the height above*/
transform: translate(0,-100%); /* the transform property makes the magic happen. 
The translate value is moving on the axes of x = 0 and y = -100%*/
transition-timing-function: ease-in-out; /* W3 Schools tells us this 
"Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))" */
transition-duration: 3s; /* change the hover scroll speed*/

.scrolling-image img {
transition-timing-function: ease-in-out;
transition-duration: 3s; /* changes the speed scrolling back after hover*/

This add the "View" notice when the image is linked"
If not need everything below can be removed
.scrolling-image .fl-photo-content A::before
content: "View";  /* Change View to your preferred text*/
position: absolute;
margin: 100px 50% 50% 50%;
width: 100px;
font-size: 14px;
.scrolling-image A::before
transform: translate(-50%, -50%);
background: rgba(255, 0, 0, 0.8); /*Button color with 20% opacity*/
color: #FFF;
-webkit-font-smoothing: antialiased;
font-weight: 600;
border-radius: 5px;
padding: 16px;

/*We use this Chrome extension to capture full pages

Discounts On These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction" 25% off



Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment