{"id":987,"date":"2017-05-23T10:50:32","date_gmt":"2017-05-23T08:50:32","guid":{"rendered":"http:\/\/divinotes.flywheelsites.com\/?p=987"},"modified":"2020-04-15T14:05:11","modified_gmt":"2020-04-15T12:05:11","slug":"create-image-scrolls-hover","status":"publish","type":"post","link":"https:\/\/divinotes.com\/create-image-scrolls-hover\/","title":{"rendered":"Create An Image That Scrolls Up When You Hover Over It"},"content":{"rendered":"

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n

Okay, I have to admit, I love this image scroll effect<\/strong>! It’s looks so cool and I’ve spotted it quite a few times in the wild recently. The best thing is, it’s actually quite easy to achieve in the Divi theme<\/a>. Before we go any further, let’s begin with an example.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” column_structure=”1_2,1_2″][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.4.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n

Scrolling Image Example<\/h2>\n

As a web designer, one of the best use cases for this effect would be to show off my Divi layouts and also to show off the sites I’ve built on \u00a0a portfolio page.<\/p>\n

In this example I’ve made a full page screenshot of my first commercially available layout packed called Beach House<\/a>. Hover your mouse over the image and watch as it glides effortlessly down the page.<\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” custom_css_main_element=”-webkit-box-shadow: 10px 10px 28px -3px rgba(0,0,0,0.5);||-moz-box-shadow: 10px 10px 28px -3px rgba(0,0,0,0.5);||box-shadow: 10px 10px 28px -3px rgba(0,0,0,0.5);” custom_padding__hover=”|||”][et_pb_text admin_label=”Scrolling BG Text” module_class=”slippery” _builder_version=”3.27.4″ background_image=”http:\/\/divinotes.com\/wp-content\/uploads\/2017\/05\/Beach-House-Layout-Screenshot.jpg” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_padding=”300px|||” custom_css_main_element=”margin-left: auto!important;||margin-right: auto!important;||transition: background-position 1.5s ease-out 0.5s;||background-position: top center;||background-size: 100% auto!important;||height: 100%;||background-repeat: no-repeat;” use_border_color=”off” saved_tabs=”all”][\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”3.27.4″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]<\/p>\n

Get Scrolling With A Little CSS<\/h2>\n

Believe it or not, most of the magic happens in the humble little text module. In the example above, I’ve used a two column row with a text module in each.<\/p>\n

In the text module that you want to use for the scrolling image, place the image in the background field of the text module:<\/p>\n

\"\"<\/p>\n

Next, go to the Design tab and in the Custom Padding Top<\/strong> field, set the value to the height you’d like your image to be. I’ve set mine to\u00a0300px.<\/p>\n

Now head on over to the Advanced tab, find the Custom CSS<\/strong> section\u00a0and add the following CSS to the Main Element<\/strong> section.<\/p>\n