{"id":48298,"date":"2015-05-12T03:25:24","date_gmt":"2015-05-12T07:25:24","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=48298"},"modified":"2017-07-31T09:58:30","modified_gmt":"2017-07-31T13:58:30","slug":"joomla-3-x-how-to-remove-image-overlay-effect","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-how-to-remove-image-overlay-effect.html","title":{"rendered":"Joomla 3.x. How to remove image overlay effect"},"content":{"rendered":"

\r\n

Hello! This video tutorial shows how to remove image overlay effect in Joomla 3.x.<\/p>\r\n

Joomla 3.x. How to remove image overlay effect<\/a><\/p>\r\n

You might have an overlay effect<\/strong> on your template’s images:<\/p>\r\n

\"joomla_how_to_remove_image_overlay_effect_1\"<\/a><\/p>\r\n

Let’s learn how to get rid of it.<\/p>\r\n

    \r\n
  1. \r\n

    Using Firebug<\/a> extension in Firefox or standard “Inspect Element”<\/strong> feature of your browser locate the class the image overlay is assigned to:<\/p>\r\n

    \"joomla_how_to_remove_image_overlay_effect_2\"<\/a>\r\n\t<\/li>\r\n

  2. \r\n

    You can see the following CSS rule<\/strong> is assigned to this class:<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    .moduleItemImage strong, .catItemImageBlock strong, .itemImageBlock strong, .userItemImageBlock strong, .genericItemImageBlock strong, .tagItemImageBlock strong {
    \r\n\tbackground: url("..\/images\/mask.png") repeat scroll 0 0 rgba(0, 0, 0, 0);\r\n\tborder: 5px solid #2d2b28;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tposition: absolute;\r\n\tright: 0;\r\n\ttop: 0;\r\n\ttransition: all 0.5s ease 0s;\r\n}<\/pre>\r\n
    The rule can be edited in template.css<\/strong> file on line 207<\/strong>:<\/p>\r\n
    \"joomla_how_to_remove_image_overlay_effect_3\"<\/a><\/p>\r\n
    Replace the “background”<\/strong> property with the following:<\/p>\r\n
    background: none;<\/pre>\r\n
    Save the file and refresh the page to see changes.<\/p>\r\n
    Images overlay effect has been successfully removed:<\/p>\r\n
    \"joomla_how_to_remove_image_overlay_effect_4\"<\/a><\/p>\r\n
    This is the end of the tutorial, you have learnt how to remove image overlay effect.<\/p>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    Joomla 3.x. How to remove image overlay effect<\/a><\/p>\r\n
    \r\n\r\n\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"
    This video tutorial shows how to remove image overlay effect in Joomla 3.x.<\/p>\n","protected":false},"author":68,"featured_media":48305,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[835,537,483,1856],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/48298"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=48298"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/48298\/revisions"}],"predecessor-version":[{"id":82361,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/48298\/revisions\/82361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/48305"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=48298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=48298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=48298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}