[Fiona AParticipant]

Hello,

Just wondered what the css would be to change the opacity of the background image on a page while hovering. Is it possible to get 2 different css codes – 1 that would change the opacity of every background image on a page and one that would only target each “section” i.e. section 1 or section 2 (which used to be column I believe).

I have a code that used the x-column band style which is no use once working with cornerstone.

Thanks

[FriechModerator]

Hi Fiona,

Thanks for writing in! The opacity on a background image is kind of tricky but let see what we could do. Please provide us the site url. I think the second one does not need a custom css, as CornerStone provide option to set a background on each Section. http://prntscr.com/7am1kx

Cheers!

[Fiona AParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,
Thanks for your information.
Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-face-content:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

Hope it helps.

[Fiona AParticipant]

Hi,

When I put that in it only did so for the card element which is bizarre. I’ve changed my mind about it now but would still be good to know for future reference.

Thanks

[ChristopherModerator]

Hi there,

Please try this :

.x-section:hover:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  content: '';
  display: block;
}

Hope it helps.

[Fiona AParticipant]

Hi,

Thanks this works but it does it for the whole page as opposed to just one section. How would I specify it to be just one section? Would I have to give it a class? I’m not sure.

[Paul RModerator]

Hi Fiona,

Yes, you can add a class to your section then change the code according to your class name.

For example if you added a class hover-background change your css code to this.

.x-section.hover-background:hover:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  content: '';
  display: block;
}

http://screencast.com/t/jZuHkQ42jW

Hope that helps.

[Tandem26Participant]

Hi, sorry to pick up this thread again – I searched for ages for this, and your code solved it – just one thing I’d like to change it round: I would like the opacity of .5 originally (not mouse-over) and it to be clear (opacity: 0) on hover.
With your code it’s obviously clear/transparent originally and semi-opague on hover.
Is that possible?
I am applying this to a column with background image behind text links.
Thanks !

[Paul RModerator]

Hi,

You can add a unique class to your column.

eg. Add my-column

You can then add this in your custom > css

.x-column.my-column {
    background-color: rgba(0,0,0, 0.5);
}

.x-column.my-column:hover {
    background-color: rgba(0,0,0, 0);
}

If that doesn’t help please provide us your site url so we can provide you a tailored code to your situation.

Thanks

[Author]

Posts