[Solved] Fix overlay issue

[Historical Forums User]

hi.

i got this overlay created but it don’t work 100%.
http://codepen.io/adambako/pen/oXmRXe

the hover effect is sometimes disappear..

please i need a help how to fix it.

thanks a lot

[Paulie_D]

I’m confused as to what you are trying to do.

Are you trying to overlay JUST the image?

[Historical Forums User]

hi,

sorry for lack of details..

what im trying to do is have a image with overlay.. + with overlay effect the text from outside come over the image and overlay.. and it all have to be clickable area…

[Paulie_D]

I think this is the sort of thing you are after…it’s much simpler.

The real problem is that it can’t be clickable as links can’t contain other links.

http://codepen.io/Paulie-D/pen/EjrzJo

So either the whole overlay can be a link (which is easy) BUT it can’t have another link inside…OR you use Javascript to make the overlay clickable.

[Historical Forums User]

thanks paulie..

it looks nice and simpler. but it’s now 100% what i wanted..

the text that come from outside should be visible always..
before hover it should be displayed under the image.

[Paulie_D]

That’s easy…just remove the overflow hidden and opacity values.

http://codepen.io/Paulie-D/pen/KpJjda

[Historical Forums User]

:) we are still missing..

but is a good way.. the overlay (green color) should works as before.. so it should be separate from the text and shows only when hover.. just text stay visible always

[Historical Forums User]

hi paulie.
i just want let you know i make it as i want..

but only on my live site, i dont extract the all needed code to codepen..

you can see it here http://www.zdrava-energia.sk/

just dont look at the design and colors :D

[Author]

Posts