I have some text on top of an image in a div container that serves as a link.
<a href="https://link.com" style="color:white">
<div class="thumbnail">
<img src="image.jpg" class="rnd" alt="image" style="width:100%;">
<div class="textinimage">some long text</div>
</div>
</a>
class "rnd" only rounds off the edges of the image
Text is supposed to be centered and cut off if it’s too long for the container
.textinimage {
font-size:1.1vw;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
class "thumbnail" does the hovering stuff (as well as some opacity), although I am going to be honest, I don’t really know what half of this does as I just copied it from an older project + I’m not very good with CSS
.thumbnail {
top:-50px;
left:-35px;
display:inline-block;
z-index:999;
cursor: pointer;
opacity: 0.5;
-webkit-transition: all 0.4s ease-in-out;
}
.thumbnail:hover {
transform: scale(1.05);
opacity: 1;
}
Current issue is that the cutoff seems to only work once I hover over the image/text.
Any idea as to how I can fix this? Feel free to roast and change my CSS btw.
2
Answers
The main issue is that
position: relative
was missing on.thumbnail
. This should work:You have a single issue in your code:
absolute
inside parent.thumbnail
(…relative to.thumbnail
…), you need to define.thumbnail
as a new stacking context to position the image in with.thumbnail { position: relative }
In the snippet I created two custom attributes you can mess with:
[ellipsis]
for single line long text ending with ‘…’, the ellipsis[line-clamp]
to limit the number of lines vertically ending with ‘…’, the line-clamp ellipsis.You cannot use both on a single element, use either/or:
<div class="textinimage" ellipsis>
<div class="textinimage" line-clamp>
I used
line-clamp
and a lot of textual jibberish…snippet