Tutorial

Elementor Image Box – Scroll Description

Video

Description

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

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

Styles

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:

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

If you have Elementor PRO:

You could do either of the above
You could paste it into Page Settings -> Advanced -> Custom CSS - if only used on the page
You could paste it into Site Settings -> Custom CSS to use Site-Wide

.image-box-description-scroll{
    --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;
    padding:3px;
    line-height: 1;
    color: white;
    position: absolute;
    top:0px;
    left:0;
    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);
}