-
Posts
-
Hi,
i am working on a layer slider that has some semi transparent elements that link to other pages.
Unfortunately the link tag is messing with the style of those elements.If you look at the work in progress site, you’ll see the text above the bottom right image has a different style then the others.
The text above the other 3 images are linked and way harder to read because of that.What i got so far:
My elements are <p>
My elements have opacity: 0.75The Problem when adding links to my elements:
<p> elements are wrapped inside an<a>that has opacity: 0.75 (opacity gets applied twice => reduced opacity)
The line-height of a linked element gets reduced to 14px compared to the 22px when not linked.what i got so far;
.ls-slide a>p{ line-height: 22px; opacity: 1 !important; }Problem:
changing the opacity to 1 messes up the animationHi!
I think the opacity value is the cause of the problem – when I remove the value I can read the text without problems. I recommend to apply a semi-transparent background-color to the box and to remove the opacity value. Instead of:
background-color: rgb(173, 31, 35);use
background-color: rgba(173, 31, 35, 0.75);If you don’t know the rgb value you can use this converter: http://hex2rgba.devoth.com/ to generate a rgba value from your hex color value.
Best regards,
Peterthanks, i thought about using sqrt(opacity) for the elements that are linked.
Your solution won’t make the text transparent. But that might be a good thing. i’ll play around with it a little bit :)
- You must be logged in to reply to this topic.