[Michael PParticipant]

Hi,

The default hover effect on images in Cornerstone’s block grid seems to be an opacity effect – the yellow background colour of my site is showing through on hover, and the effect is not to my liking!

I found a good thread here that overrides this, but I couldn’t adapt the code to do what I want:

Block grid hover opacity and zoom effect

The css code for the zoom effect is good, but the opacity effects don’t work very well. What I’d like to happen is for every image in the grid to begin slightly darker, and for each image to return to normal on hover.

I would use Essential Grid, but unfortunately there are glitches with the Ajax function that allows the grid to open post content in a lightbox, so I’ve reverted to using Cornerstone’s block grid with Popup Maker.

Site and login details below.

[Michael PParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

a.x-img:not(.x-img-thumbnail):hover {
    opacity: 1;
}

Hope it helps 🙂

[Michael PParticipant]

Many thanks for your help.

The CSS you gave me is great, but doesn’t create the desired effect. A value of 1 removes the hover effect completely, and lowering the value controls the opacity, which is useful to know.

However, the effect I want to achieve is a slightly darker overlay on the images, in their default (i.e. pre-hover) state. On hover, I would like the overlay to switch off or fade out, so that the image comes up to normal brightness.

[Paul RModerator]

Hi,

Please remove the code provided above then add this in Cornerstone > Settings > Custom CSS

https://www.screencast.com/t/UIPW7GRa

#x-section-5 .x-block-grid-item a.x-img {
      background-color:#000;
}

#x-section-5 .x-block-grid-item a.x-img img {
      opacity:0.5;
}

#x-section-5 .x-block-grid-item a.x-img:hover img {
      opacity:0.5;
}

Hope that helps.

[Michael PParticipant]

Hi,

That’s almost right.

But the second part of the code, the hover part, doesn’t return the image to normal, i.e. with no effect applied. Instead it changes the opacity, but changing the value doesn’t help.

What CSS would I apply so that hover returns the image to normal?

(I’ve removed that code for the time being, as the site is now live)

[JoaoModerator]

Hi There,

It seems like you are trying to achieve some custom development, we will try to help, but the effect you are looking for may fall out of the scope of our support and it seems to be a particular customization.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Michael PParticipant]

Hi,

The login credentials and site are in the private reply above.

Thanks

[RadModerator]

Hi there,

Please add this

   a.x-img:not(.x-img-thumbnail):hover {
      opacity: 1;
  }
  a.x-img:not(.x-img-thumbnail) {
  background-color:#000;
  }

a.x-img:not(.x-img-thumbnail) img {
-webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

a.x-img:not(.x-img-thumbnail):hover img
{
  opacity: 0.5;
  }

Thanks!

[Michael PParticipant]

Hello,

Thanks for your help with this, much appreciated. We’re almost there I think!

With the CSS above, the grid begins normal, and each image darkens on hover.

The effect I’m after is the other way around: the entire grid darker to begin with (like in Paul R’s code), and each image returning to normal opacity on hover.

[JoaoModerator]

Hi There,

Please try:

   a.x-img:not(.x-img-thumbnail) {
      opacity: 1;
  }
  a.x-img:not(.x-img-thumbnail):hover {
  background-color:#000;
  }

a.x-img:not(.x-img-thumbnail):hover img {
-webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

a.x-img:not(.x-img-thumbnail) img
{
  opacity: 0.5;
  }

Hope it helps

Joao

[Author]

Posts