Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Image Widget overlay caption stays visible on hover in stretched row
Hi team,
I’m using SiteOrigin Widgets Bundle with Page Builder (v2.29.x) inside a Full Width Stretched row (`data-stretch-type=”full-stretched”`), and I’m trying to hide the Image Widget overlay caption on hover (similar to the older thread on hiding text on hover on an image).
When I inspect the DOM in Chrome DevTools, `.sow-image-overlay-caption` has an inline style `opacity: 1; pointer-events: auto;` injected on initialization, which overrides my custom CSS selector `.sow-image-container:hover .sow-image-overlay-caption { opacity: 0; visibility: hidden; }` unless I add `!important`, and even then a z-index stacking context conflict occurs when flex-wrap triggers on tablet breakpoints.
Here is the Chrome DevTools Elements & Computed Styles screenshot showing the inline opacity and flex-wrap warning:
Inspector screenshot link: https://media2url.com/m/2c8cfda77ede40 (captured via https://media2url.com/screenshot-to-url — direct PNG: https://files.media2url.com/free/2c8cfda77ede40.png)
.sow-image-container:hover .sow-image-overlay-caption {
opacity: 0 !important;
transition: opacity 0.25s ease-in-out;
visibility: hidden;
}
Is there a native filter or widget setting in SiteOrigin Widgets Bundle to prevent the inline `opacity: 1` attribute from being written onto `.sow-image-overlay-caption`, or a recommended parent selector for stretched rows?
Thanks!
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
1Hi there
The Image Widget doesn’t add an overlay on its own. In SiteOrigin plugins, an overlay on the Image Widget comes from the Image Overlay Addon in SiteOrigin Premium, and the addon’s script sets the overlay opacity inline. The addon has a setting for hover behavior, so no CSS is needed:
Go to SiteOrigin > Premium Addons.
Find Image Overlay and click Settings.
Set Desktop device trigger to Hide on hover, and save.
This setting applies to every image with an overlay, on screens wider than Touch device width (1024px by default). Below that width, the overlay can show on touch or always, so it won’t hide on tablets. To remove the overlay from one image only, edit the Image Widget, open Image Overlay, and set Enable Image Overlay to Disabled.
The addon’s overlay uses the
.so-premium-image-overlayclass. If the overlay on your page uses a different class, another plugin or your theme adds it.With a SiteOrigin Premium license, you can also email [email protected] for help.
Please let us know how it goes.
Thanks