If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Joomla 3.x. How to remove image overlay effect

Hello! This video tutorial shows how to remove image overlay effect in Joomla 3.x.

Joomla 3.x. How to remove image overlay effect

You might have an overlay effect on your template’s images:

joomla_how_to_remove_image_overlay_effect_1

Let’s learn how to get rid of it.

  1. Using Firebug extension in Firefox or standard “Inspect Element” feature of your browser locate the class the image overlay is assigned to:

    joomla_how_to_remove_image_overlay_effect_2

  2. You can see the following CSS rule is assigned to this class:

.moduleItemImage strong, .catItemImageBlock strong, .itemImageBlock strong, .userItemImageBlock strong, .genericItemImageBlock strong, .tagItemImageBlock strong {
background: url("../images/mask.png") repeat scroll 0 0 rgba(0, 0, 0, 0); border: 5px solid #2d2b28; bottom: 0; left: 0; position: absolute; right: 0; top: 0; transition: all 0.5s ease 0s; }

The rule can be edited in template.css file on line 207:

joomla_how_to_remove_image_overlay_effect_3

Replace the “background” property with the following:

background: none;

Save the file and refresh the page to see changes.

Images overlay effect has been successfully removed:

joomla_how_to_remove_image_overlay_effect_4

This is the end of the tutorial, you have learnt how to remove image overlay effect.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to remove image overlay effect