How can I disable the image hover layer in News365?

Hi there,

Thanks for reaching out.

The hover layer in News365 is added with CSS pseudo-elements in templates/shaper_news365/css/template.css, and its colour comes from your active preset file (css/presets/presetX.css). Please don't edit those files directly, because a template update will overwrite your changes. Add an override instead:

1. Go to System → Site Templates → shaper_news365 - Default → Template Options → Custom Code → Custom CSS.
   (You can also create the file templates/shaper_news365/css/custom.css. Helix3 loads it automatically.)
2. Paste the CSS below and click Save:

/* News365 – disable image hover overlay, icon and zoom */
.sppb-addon-article .sppb-img-wrapper:before,
.entry-image a:before,
.sp-tab-modules .items_mask .tab-padding .article-list-img a:before,
.sp-module .latestnews > div .article-list-img a:before,
.sp-vertical-tabs .sp-tab-pane .sp-img-wrapper a:before,
div.catItemImageBlock span.catItemImage a:before,
.k2ItemsBlock .moduleItemImage:before {
  display: none !important;
}

.sppb-addon-article:hover .sppb-img-wrapper:after,
article.item:hover .entry-image a:after,
.sp-tab-modules .items_mask .tab-padding > div > div:hover .article-list-img a:after,
.sp-module .latestnews > div:hover .article-list-img a:after,
.sp-vertical-tabs .sp-tab-pane .sp-article-inner:hover .sp-img-wrapper a:after,
div.catItemImageBlock span.catItemImage a:hover:after,
.k2ItemsBlock .moduleItemImage:hover:after {
  opacity: 0 !important;
  font-size: 0 !important;
}

.sppb-addon-article:hover .sppb-img-wrapper img,
article.item:hover .entry-image img,
.sp-tab-modules .items_mask .tab-padding > div > div:hover .article-list-img img,
.sp-module .latestnews > div:hover .article-list-img img,
.sp-vertical-tabs .sp-tab-pane .sp-article-inner:hover .sp-img-wrapper img,
div.catItemImageBlock:hover img,
.k2ItemsBlock .moduleItemImage:hover img {
  transform: none !important;
}

/* Keep the play button on video articles */
.video-articles .sppb-addon-article.leading-item:hover .sppb-img-wrapper:after {
  opacity: 1 !important;
  font-size: 35px !important;
}

3. Clear the Joomla cache (System → Clear Cache) and your browser cache. If CSS compression is turned on in Template Options → Advanced, clear that too.

The images will then stay as they are on hover, with no coloured layer, icon or zoom.

If you only want to remove the coloured layer but keep the zoom, use just the first block (the :before rules). If it still shows on a particular page, please share the URL and we'll check that layout for you.

Best regards,

Hi,

Thanks for contacting us. For more investigation, it will help if you give us your site URL and also a screenshot of your issue.

-Regards.