Hover Hero
Image fade on hero hover
STEP 1
Create elemntor sections as outlined below, setup as desired.
STEP 2:
Copy CSS Advanced to page advanced CSS withing the main container
STEP 3:
Edit css clasess and IDs to match image URLs. eg Item 1, 2, 3 ,4
Main Image
Set the main container inside the Hero container that contains the Html & Css Code.
Hero Images
.main-container-hero [class*="Item"]:hover {
background-color :none !important;
background-size: cover;
}
Page Css
.main-container-hero [class*="Item"]:hover {
background-color :none !important;
background-size: cover;
}
.main-container-hero:has(.Item1:hover) {
background-image: url(https://development.rictech.co.uk/wp-content/uploads/2026/03/dark-background-abstract-background-network-3d-background-7680x4320-8324-1200x675-1.png) !important;
background-size: cover;
}
.main-container-hero:has(.Item2:hover) {
background-image: url(https://development.rictech.co.uk/wp-content/uploads/2026/03/black-abstract-dark-3840x2160-9729-1200x675-1.jpg) !important;
background-size: cover;
}
.main-container-hero:has(.Item3:hover) {
background-image: url(https://development.rictech.co.uk/wp-content/uploads/2026/03/geometric-3d-3840x2160-25346-1200x675-1.png) !important;
background-size: cover;
Variables
Item Variavles, Name each contatiner with the css ID of Item1 recuring The image in the page css will populate the the BG, Hover bg image.
Notes:
For a smooth display ensure all replacement background images are of the same dimensions as the first main background.
This concept is the same if manipulatings for a wheel image display, use the same image size but utilise the png transparency.
Hero Example
Responsive: All elements are editable from box content to padding and transition speed, any number of hover Id`s accepted. HTML & CSS by RT-Design.
Hero Feature 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Hero Feature 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Hero Feature 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.