Add a Scrollable Image

What does this code do?

This code snippet will allow you to add an image that will scroll. This is useful for long images such as a full screenshot of a webpage.

Video Tutorial

Prepare Your Image

A good Chrome Extension for getting full images of webpages is GoFullPage. I recommend saving as a PNG, then converting it to a JPEG and compressing it. This will help keep the size of the file small as full webpage captures tend to be quite large and may slow down your site.

Then upload this image to Design > Custom CSS > Manage Custom Files. Place your cursor in the Custom CSS box and then click on the image. This will give you the URL of the image. Save this link and then you can delete the link from the Custom CSS box. Keep the image in Manage Custom Files or the image link will eventually stop working.

Code Snippets

Copy and paste this code into a Code Block on your site.

<div class="scrollable-image" style="height: 500px">
  <img src="IMAGEURL" width="100%" />
</div>

Insert your image url and adjust the height as needed. If you are working in Fluid Engine you will need the height listed or it will leave lots of space under your image.

Then copy and paste the following code into the Custom CSS.

/* Scrollable Image */
.scrollable-image {
  overflow: scroll;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.3));
}

@media only screen and (max-width: 640px) {
  .scrollable-image {
    height: 300px !important; //height on mobile
  }
}

Adjust the drop shadow if desired. Then adjust the height on mobile. If working in Fluid Engine, you can re-edit the mobile version of the site to remove any blank space under the image.

Bonus: Scroll on Hover

To have the image scroll to the bottom on hover, replace the code from above in the Custom CSS with the following code.

/* Scrollable Image */
.scrollable-image {
  overflow: hidden;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,.3));
}
.scrollable-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: all 3s ease-in-out;
}

.scrollable-image:hover img{
  object-position: bottom center;
}

@media only screen and (max-width: 640px) {
  .scrollable-image {
    height: 300px !important; //height on mobile
  }
}

How To Use It

1. Prepare your image and get the image link.

2. Copy and paste the code as indicated above.

3. Adjust the drop shadow and height.