Background Upper Layer Fade on Hover

[msndrstd]

How can I make the background upper layer in a column fade when I hover over it to show the Background Lower Layer underneath it?

[jade]

Hello Charan,

Please add this code to the Element CSS of the section with the backgrounds:

$el.x-section .x-bg-layer-upper-image {
  transition: opacity 0.5s ease-in-out;
}

$el.x-section:hover .x-bg-layer-upper-image {
  opacity: 0;
}

Hope this helps.

[msndrstd]

This is great. I’m actually doing it to individual columns so I changed the class to .x-col and it works perfectly, but now I wanted to ask if you know how I can make the whole column a link. I found this snippet:

jQuery("#column-link").wrap("");

and it works great, but it changes the layout of my column. I had the image spanning the width and height of the column and this JS snippet causes the height to shrink considerably.

Thanks!

[jade]

Hi Charan,

Would you mind providing the link to the page in question so that we can check it and provide some suggestions?

Thank you.

[msndrstd]

Sure. Here you go: https://www.msndrstdcreative.com/create/

It’s the third section down with the services.

[ruenel]

Hello Charan,

Thanks for providing the url. Instead of using a custom JS and CSS code, I would highly recommend that you insert a button element and make the width and height 100% so that the button itself will cover the whole of the column. You may need to remove the line elements as well giving the button element solely filling up each of the columns.

Hope this makes sense.