Change background upper layer opacity on hover

[markusp80]

Hi! On this page http://shootit.se/fotograf-i-orebro/ I have six squares, based on Creative columns 2 and 4.

On these squares I have set a white upper layer on the background with an opacity of 0.75. On hover I want this opacity to be something like 0.5, så that the image in the background of each sqaure gets more visible when moving the mouse over it. I have looked at the element CSS for the Creative Columns part, but I need to find out how to control the opacity when hovering each square. Can you help me with this?

[nabeel]

Hi @markusp80,

Thank you for reaching out to us. You probably can achieve this by adding the following code in each of your column’s Element CSS section:

$el:hover .x-bg-layer-upper-color {
    background: rgba(192, 192, 192, 0.5) !important;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps!

[markusp80]

Thanks, worked great! I added a transition of the opacity as well.

[tristup]

Hi @markusp80,

Glad that we are able to help you.

Thanks