Overflow protection on text in container that transforms upon hover - CSS

PascalMaier
February 2, 2023
322 views
0 votes
2 Answers

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.

Answers

The main issue is that position: relative was missing on .thumbnail. This should work:

.thumbnail {
    position: relative;
    display: inline-flex;
    opacity: 0.5;
    transition: all 0.4s ease-in-out;
}

.thumbnail:hover { 
    transform: scale(1.05);
    opacity: 1;
}

.textinimage {
    position: absolute;
    display: flex;
    top: 0;
    left: 5%;
    right: 5%;
    bottom: 0;
    align-items: center;
}

.textinimage-inner {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

<a href="https://link.com" style="color:white">
    <div class="thumbnail">
        <img src="https://dummyimage.com/300x150/669bc9/fff.png&text=+" class="rnd" alt="image" style="width:100%;">
        <div class="textinimage">
          <div class="textinimage-inner">
            some long text some long text some long text some
          </div>  
        </div>
    </div>
</a>

You have a single issue in your code:

As the image is positioned 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

[ellipsis], [line-clamp] {
  /* all [MANDATORY] for horizontal ellipsis/vertical line clamp */
    width   : 90%; /* As per original code by OP */
    overflow: hidden;
}
[ellipsis] {
  /* all [MANDATORY] for horizontal text ellipsis */
    white-space: nowrap;
    text-overflow: ellipsis;
}
[line-clamp] {
    /* all [MANDATORY] for vertical line clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 3;
}

.textinimage {
    font-size: 1.1vw;

    position: absolute; 

    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.thumbnail {
    /* position child elements relative to this */
    position: relative;

    /* Not sure what these are for... disabled them */
    /*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;
}
.rnd { border-radius: 28px }

<a href="javascript:void(0)" style="color:white">
    <div class="thumbnail">
        <img src="https://picsum.photos/id/83/400?random" class="rnd" alt="image" style="width:100%;">
        <div class="textinimage" line-clamp>
            Lorem ipsum dolor sit amet, mel omnium vulputate percipitur ex. Ex vel quas inani appellantur. Iusto dolore cetero duo ad. Per facer mediocrem eu. An legimus voluptatibus eam, cetero aperiri consectetuer sit id, hinc sale evertitur cum ei.
                Erant maiorum iracundia ius ne. Veri summo clita in usu, possim apeirian interesset usu no. Malorum repudiandae cu eum, ad vel putant torquatos. Idque feugait aliquando his eu, sed te sanctus omittam placerat. Ex eum ridens euismod facilisis, sea id lorem reformidans complectitur.
                Qui purto elitr at, at corrumpit signiferumque mea. Vix quidam consulatu ei, no esse vocibus convenire usu, est te erroribus imperdiet. Soleat molestiae deseruisse ei sea, ea sale mollis nam. Ut eam eius vidit consulatu.
        </div>
    </div>
</a>

Please signup or login to give your own answer.

Click here to cancel reply.

Overflow protection on text in container that transforms upon hover – CSS

Answers