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

Video

Notes

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.

Code

CSS

/*------------------------------------------------------ 
"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
https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
*/

You can support my work by buying the tools I use through my affiliate links:

Exclusive 25% Off These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

--------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder |

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