Hover Interactions - Opacity Issue

Hi everyone!

I am trying to create a hover interaction where by when i hover over an image, the opacity of the image itself fades and that text then appears at the texts opacity is at 100%.

The read only link to my site is below. If you take a look at the parapet image (furthest to the right) when i hover over the image the opacity fades (great), the text rises (great), but the opacity of the text doesn’t and i am at a loss as to why this isn’t working :pensive:.

I would appreciate any feedback.

Many thanks.



Hi there

I took a quick look and it seems like this is happening because your text element is placed inside of your image element so the opacity settings of the parent is overriding the interaction you set up for the child.

Simply move the text one layer up, onto your wrapper class so that both elements are siblings (After):

Instead of being parent and child (Before):

Hope this helps… :wink:

Hi @AlanBorger,

I have tried your suggestion and now i have half which is 100% opacity and the other is still faded :confused:. This is the same on the other two images also. So we are half way there!

I may be missing something really simple, so your help is most appreciated!



It seems like now the text is remaining opaque (although at a dark grey color - you might want to change it to black 100%) however, the fact that one image is becoming 50% transparent when you have another image below, that makes it confusing.

In my humble opinion, if you don’t mind me saying, I think there’s one too many interactions on that screen. When you finally understand what’s going on with the hover interactions, the slide moves automatically. I would get rid of the slider if that’s the case and maybe, try something different than the images becoming transparent (since there’s another image below).

For example, if instead of making the images become transparent you were to add a similar element/layer/class that fills that image block with a 50% white background, it would give the exact same effect that the image is fading out, without letting the image below appear from underneath it.

So here’s what you gotta do to make this happen:

(1) Wrapper > (2) Image Div > (3) 100% by 100% Div with 50%white background (adjusting to fit all of the parent element with the same rounded borders) > (4) text element.

Now take your third element and make it transparent initially and opaque when hovered.

so, your image element doesn’t fade out, instead, a similar block fades in on top of it, with a semi-transparent background and the text.

Got it? Hope this helps…

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.