Page Builder - More CSS Needing Implementation

[lesliekirk]

I have been asked to add what should be a simple CSS image hover effect to the images in PageBuilder. It looks like I will have to hack all the components just to get this to work. The hover effect appears to rely on the use of "figure" wrapped around the image. I tried changing the CSS to use "picture" instead but it doesn't seem to like it.

I'm trying to work with the classes in place (before trying any attempt at hacking the components) and I am trying to find something common to all the components

This is the simple code that I need to use. I have already made one tweak to a class name (from the code sent to me)

CSS (if I tried changing figure to picture it didn't work)

figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.mmx-wrapper figure {
background: #1abc9c;
}
.mmx-wrapper figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.mmx-wrapper figure:hover img {
opacity: .5;
}

<div class="mmx-wrapper column">
<div>
<figure><img src="image.jpg" /></figure>

</div>
<div>
<figure><img src="image.jpg" /></figure>

</div>
<div>
<figure><img src="image.jpg" /></figure>

</div>
</div>

Yes, I understand this is not what PageBuilder is designed to do, but it's what the store owner needs it to do.

[lesliekirk]

For those of you following along. I may have gotten this to work (just need the store owner to review).

I used the following edits

In the mmx-hero file

/* Added for hover effect */
.mmx-hero__image-container {background-color: #1abc9c;}

In the mmx-base file (at the very bottom)

/* Added for hover effect */
mmx-hero picture[slot="image"]:hover > img {opacity: .5}

I think I still need to get this one figured out

.mmx-hero__image-container picture img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;

I don't this it's working.