Hover Wheel

Image fade on wheel hover

STEP 1
Copy Section

STEP 2:
Copy CSS Advanced to page advanced CSS

STEP 3:
Edit css clasess and IDs to match image URLs.

Wheel Images

Center Wheel Images

				
					.main-container-circle [class*="Item"]:hover {
    background-color:none !important;
    #background-color: #CE3A3AA1 !important;
}

Page Css

				
					.main-container-circle [class*="Item"]:hover {
    background-color:none !important;
    #background-color: #CE3A3AA1 !important;
}
.main-container-circle:has(.Item1:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_comedy.png) !important;
}

.main-container-circle:has(.Item2:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_dance.png) !important;
}

.main-container-circle:has(.Item3:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_2exhibition.png) !important;
}

.main-container-circle:has(.Item4:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_1family.png) !important;
}
.main-container-circle:has(.Item5:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_1food_drink.png) !important;
}

.main-container-circle:has(.Item6:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_1walk_tours.png) !important;
}

.main-container-circle:has(.Item7:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_1film.png) !important;
}

.main-container-circle:has(.Item8:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_talks.png) !important;
}
.main-container-circle:has(.Item9:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/01/65D4AFB7-E892-4084-AE5D-1B6EA81E1BEA.jpeg) !important;
}

.main-container-circle:has(.Item10:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/01/65D4AFB7-E892-4084-AE5D-1B6EA81E1BEA.jpeg) !important;
}

.main-container-circle:has(.Item11:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_literature.png) !important;
}

.main-container-circle:has(.Item12:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_kids.png) !important;
}

.main-container-circle:has(.Item13:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_music.png) !important;
}

.main-container-circle:has(.Item14:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/02/rsz_1arts_craft.png) !important;
}

.main-container-circle:has(.Item15:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/01/65D4AFB7-E892-4084-AE5D-1B6EA81E1BEA.jpeg) !important;
}

.main-container-circle:has(.Item16:hover) {
    background-image: url(https://hurstfestival.org/wp-content/uploads/2026/01/65D4AFB7-E892-4084-AE5D-1B6EA81E1BEA.jpeg) !important;
}

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:
By default the meta data is enabled, there are lots of option to customise the meta in the post editor for specific posts.