Elementor Image Box – Scroll Description

Uses Plugins

Elementor Free
Elementor PRO


This tutorial uses a standard Elementor Image Box Widget with some CSS to make the “Description” scrollable for long text. Initially, the overflow text is hidden. When hovering on the widget, a styled scrollbar appears.

This is great for keeping the widget heights the same while allowing for longer descriptions.


Image Box Widgets

  1. Drag an Image Box Widget to the editor
  2. Style it how you like it
  3. Add the class "image-box-description-scroll" to the Widget
  4. Add some long text to the description
  5. Duplicate the Column a couple of times


Copy and paste the CSS code below, to where you prefer.

I normally work in an HTML Widget on the page while developing. When complete I move it to Site Settings -> Custom CSS.

Note: if you use WP Customize or an HTML Widget, you need to wrap the code in <style> </style>


Customizing Individual Instance

The following variables may be customized for each instance;

--height: 300px;
--track-color: green;
--thumb-color: red;
--track-width: 7px;
--ff-track-width: thin;
--right-padd-for-scroll: 7px;

On the Widget - Advanced -> Attributes - Set the style attribute with the variable you want to override.

e.g. to make the --track-color: orange and --thumb-color: blue:
style|--track-color: orange; --thumb-color: blue

Note: after "style|" the variables are standard CSS you would see on any HTML style attribute.

Code (click to copy)

CSS Code (css)

If you have Elementor Free:

  1. You could paste the code into an HTML Widget on the page you want to apply it to
  2. You could paste into Customize -> Additional CSS

If you have Elementor PRO:

  1. You could do either of the above
  2. You could paste it into Page Settings -> Advanced -> Custom CSS  - if only used on the page
  3. You could paste it into Site Settings -> Custom CSS to use Site-Wide
    --height: 300px;
--track-color: green;
--thumb-color: red;
--track-width: 7px;
--ff-track-width: thin;
--right-padd-for-scroll: 7px;

/* Description Container */
.image-box-description-scroll .elementor-image-box-description{
height: var(--height);
overflow: hidden;
padding-right: var(--right-padd-for-scroll); /* allow for scrollbar */
padding-top: 20px; /* allow for tag */
position: relative;

.image-box-description-scroll:hover .elementor-image-box-description{
overflow-y: scroll;

/* FF Scrollbar */
scrollbar-color: var(--thumb-color) var(--track-color);
scrollbar-width: var(--ff-track-width);
padding-right: 2px;
background: #ffffff15;

/* Scroll Tag */
.image-box-description-scroll .elementor-image-box-description:before{
    content: "SCROLL ME";
    font-size: .7rem;
    line-height: 1;
    color: white;
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 99;
    background: #555;
    border-radius: 5px

/* WebKit Scrollbar */
.image-box-description-scroll .elementor-image-box-description::-webkit-scrollbar{
width: var(--track-width);
.image-box-description-scroll .elementor-image-box-description::-webkit-scrollbar-track{
background: var(--track-color);
.image-box-description-scroll .elementor-image-box-description::-webkit-scrollbar-thumb{
background: var(--thumb-color);