Theme I am using: Horizon
I’m trying to have a hover effect on images in the split showcase block - when users hover over the image I want the image to darken so it’s more obvious that you can click it to then open a new link.
I tried editing the CSS file using chatgpt’s help but it did not work.
not sure what other info is needed for troubleshooting but just ask and i will try my best to provide!
@tannie This is doable on Horizon, but the hover needs to target the image wrapper, not just the image itself that’s usually why the CSS didn’t work.
Try this first (safe + reversible):
Online Store → Themes → … → Edit code
Open base.css (or theme.css)
Add this at the bottom:
Copy code
Css
.split-showcase__image-wrapper::after {
content: “”;
position: absolute;
inset: 0;
background: rgba(0,0,0,0);
transition: background 0.3s ease;
pointer-events: none;
}
.split-showcase__image-wrapper:hover::after {
background: rgba(0,0,0,0.35);
}
This adds a dark overlay on hover without breaking clicks.
If this doesn’t apply, Horizon may be using a slightly different class name for your block.
Quick question so I can be precise:
Is this Split Showcase added via a section, or inside a page builder block?
just tried it and nothing happened. I added the split showcase as a section in the template
@tannie Horizon wraps the Split Showcase a bit differently, so the selector needs to be more specific.
Try this instead:
Edit code → base.css
Add this at the very bottom:
Copy code
Css
.split-showcase .media {
position: relative;
}
.split-showcase .media::after {
content: “”;
position: absolute;
inset: 0;
background: rgba(0,0,0,0);
transition: background 0.3s ease;
pointer-events: none;
}
.split-showcase .media:hover::after {
background: rgba(0,0,0,0.35);
}
This targets Horizon’s actual image container (.media), which is why the first attempt didn’t trigger.
If this still doesn’t apply, Horizon may be using a link overlay on top of the image.
Quick check so I can lock it in exactly: Is the image itself clickable, or is there a full-width link overlay on the section?
When I inspect the image this is what is shown to be the container of the image. The entire image (Shop our Flushing store) is highlighted in blue when the cursor is on
this is a screenshot of the theme editor with the split showcase on the right. I have it so that the image is clickable and opens to a new link.
<img src="//txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=3840" alt="" srcset="//txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=832 832w, //txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=1200 1200w, //txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=1600 1600w, //txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=1920 1920w, //txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=2560 2560w, //txf851-xj.myshopify.com/cdn/shop/files/Screenshot_2026-01-13_at_1.39.04_PM.png?v=1768332192&width=3840 3840w" width="3840" height="3498" loading="lazy" sizes="100vw" fetchpriority="auto">
div class=“background-image-container”>
could you just help me here?
@tannie That’s fine by me 
Try to add this to Split showcase > Custom CSS setting
.group-block:hover .background-image-container {
opacity: 0.1;
background: #000;
transition: all 0.7s;
}
To me, it did not work on the theme customization with the inspector active, but when disabled, it was showing. As well as on the front end.
what do you mean by split showcase > custom css setting? do you mean in the css file (which there is only one of - base.css)?
Sorry @tannie my bad, missed most important part.
So in you customize theme, under your Split showcase section, under Custom CSS setting
that worked! is there a way to make it do the opposite, like “lighten” the image (if the image in the split showcase already has an overlay of 50% darker, make the hover state 0%)?
You asked for dark background 
And previous code was not applied dirrectly on image so can not be lighten,
But alternative, first remove previous code from Custom CSS setting.
Than in base.css, at end add
.group-block:hover .background-image-container {
filter: brightness(120%);
transition: all 0.7s;
}
and adjust value, 100% is regular, so more would lighten and less darken.
Also note, that is not a recommended way to add code, as if you upgrade that code may be overwritten. Adding to section’s Custom CSS setting in admin is preferred. But in this case filter is not supported.
So you could do this instead, if you want to keep getting updates. Create a new custom.css file in assets, make sure it is selected then click on create new file icon and enter name of the file “custom.css” and copy code there.
Next step is to include that file in your theme, so in the snippets folder, find and open stylesheets.liquid add one line so it looks like
{{ 'overflow-list.css' | asset_url | preload_tag: as: 'style' }}
{{ 'base.css' | asset_url | stylesheet_tag: preload: true }}
{{ 'custom.css' | asset_url | stylesheet_tag: preload: true }}
This way you organize new code, and if upgrade change last file, it is just one line to add.
I’d suggest instead adding a code like this to the “Custom CSS” of the “Split showcase” section:
@media (hover: hover) and (pointer: fine) {
.group-block {
opacity: 0.8;
}
.group-block:hover {
opacity: 1;
}
}
Unfortunately, Shopify does not accept filter there, therefore the use of opacity.
You can swap the opacity values – on a white background less opaque would look lighter.
Or, add an image overlay either dark or light and use code like this:
@media (hover: hover) and (pointer: fine) {
.group-block .overlay {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.group-block:hover .overlay {
opacity: 0.2;
}
}