Interaction for image element not working?

[Adams]

I’m using X Pro. In the “portfolio” listing at the bottom of http://dev1.thumbprintbooks.ca/grandfather-story, I would like to have the images go darker when the mouse hovers over them, indicating that there is an action (link to the associated page). In the first row for devices 1200px+, I have clicked on the Image element for each of the images, and set the interaction for background color to rgba(11, 7, 5, 0.70). That does not seem to darken the image either in the preview area in X Pro or on the front end. Is there a way to manage the interaction color for the image?

[ruenel]

Hello There,

Thanks for writing in! Do you want something like this?

If that is the case, please edit the page back in Cornerstone and insert the following custom css in the css settings tab, Settings > Custom CSS

.x-image:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; 
    left: 0;
    background-color: rgba(11, 7, 5, 0.70);
    opacity: 0;
    transition: opacity 1s ease;
}

.x-image:hover:before {
    opacity: 1;
}

We would loved to know if this has work for you. Thank you.

[Adams]

I am working with X Pro (not Cornerstone). Unfortunately if I put that CSS into Global CSS, then EVERY image on the site is grayed out upon hover, not just the images in the portfolio rows on http://dev1.thumbprintbooks.ca/grandfather-story. Plus the entire column is grayed out (including the caption underneath the photo).

Please hold off on further work on this post. I’ll explore whether I should use Essential Grid or The Grid instead.

Thanks.

[Adams]

I have developed the portfolio listing with Essential Grid, so no need to work further on this.

[thai]

Glad to hear that