CMS Components

Dual panel image reveal

PRO

Turn a static content block into an engaging hover experience. When visitors hover, the background changes while the text and button colours shift to match — a subtle but effective way to draw attention to key sections.

Copy

Unlock with Pro

Released

4 months ago

Category

Custom code

CSS

Built with

Need help?

Custom css

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/*Element UI colour shift on hover*/
.image-container .heading h4 {
    transition: all 0.6s ease-in-out;
}
.image-container .text {
    transition: all 0.6s ease-in-out;
}
.image-container .elementor-button {
    transition: all 0.6s ease-in-out;
}
/*Heading color change on hover*/
.image-container:hover .heading h4 {
    color: #FFFFFF !important;
}
/*Text color change on hover*/
.image-container:hover .text {
    color: #FFFFFF !important;
}
/*Button color change on hover*/
.image-container:hover .elementor-button {
    background-color: transparent !important;
    border-color: #ffffff !important;
    border-style: solid;
    border-width: 1px;
    color: #ffffff !important;
}