« See all FAQs for Forte — Multipurpose WP Theme (WooCommerce Ready)

Thank you to stevemonfils “This theme automatically adds hover effects on any image with a link attached to it, whether it be a link to the Colorbox, or a web page. I noticed other people were asking about this, but I found no listed solution. I recently solved this myself, using only CSS, so I though I would share.”

First, you need to remove the hover effect from the entire site. To accomplish this, add these lines of CSS:

High-level ‘catch-all’ disabling of the hover effect on all images

.pix_overlay_border { display: none; }
.pix_overlay_icon { display: none; }
a:hover .pix_overlay_border { display: none; }
a:hover .pix_overlay_icon { display: none; }
a:active .pix_overlay_border { display: none; }
a:active .pix_overlay_icon { display: none; }
a:focus .pix_overlay_border { display: none; }
a:focus .pix_overlay_icon { display: none; }

That should remove the hover effect from all images on the entire site. If you want to re-activate it for certain sections, you need to target those sections, and simply reverse the de-activation. For example, I wanted to re-activate the hover effects on a widget item and my main Gallery. Here’s what I entered:

Re-activation of the effect for the “Recent Photos” widget

div.pix_thumbs .pix_overlay_border { display: block; }
div.pix_thumbs .pix_overlay_icon { display: block; }
div.pix_thumbs a:hover .pix_overlay_border { display: block; }
div.pix_thumbs a:hover .pix_overlay_icon { display: block; }
div.pix_thumbs a:active .pix_overlay_border { display: block; }
div.pix_thumbs a:active .pix_overlay_icon { display: block; }
div.pix_thumbs a:focus .pix_overlay_border { display: block; }
div.pix_thumbs a:focus .pix_overlay_icon { display: block; }
Re-activation of the effect for the Gallery thumbs
a.colorbox.cboxElement .pix_overlay_border { display: block; }
a.colorbox.cboxElement .pix_overlay_icon { display: block; }
a.colorbox.cboxElement:hover .pix_overlay_border { display: block; }
a.colorbox.cboxElement:hover .pix_overlay_icon { display: block; }
a.colorbox.cboxElement:active .pix_overlay_border { display: block; }
a.colorbox.cboxElement:active .pix_overlay_icon { display: block; }
a.colorbox.cboxElement:focus .pix_overlay_border { display: block; }
a.colorbox.cboxElement:focus .pix_overlay_icon { display: block; }

I hope this helps anyone who has been trying to figure this out

by
by
by
by
by
by