Resize text to fit div

Question

I have a bootstrap 4 container holding 3 columns on screen sizes above breakpoint md (col-md-4).

In each column I have an img of class img-fluid that has a text description that appears on hover. I want to have this hover text scale appropriately with the responsive resizing of each img-fluid, so that it always fits on top of the image precisely.

Im my current attempt, as the images resize the text overflows its container - I want to stop this from happening by responsively resizing the text to fit the container

I've tried fitty, which works beautifully for normal text, but doesn't affect my hover text in the way I was hoping.

Is there something I'm doing wrong, or is there a better (ideally using existing bootstrap 4 classes) way of achieving this?

// fitty('.fit');
fitty('#my_fit');

fitty('#fit1');
fitty('#fit2');
fitty('#fit3');

.hvrbox {
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.hvrbox .hvrbox-layer_top {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 350px;
    height: 350px;
    background: rgba(11, 11, 28, 0.71);
    color: #fff;

    -moz-transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
    opacity: 1;
}

.hvrbox .hvrbox-text {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
}
.hvrbox .hvrbox-text_mobile {
    font-size: 15px;
    border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
    border-top: 1px solid rgba(179, 179, 179, 0.7);
    margin-top: 5px;
    padding-top: 2px;
    display: none;
}
.hvrbox.active .hvrbox-text_mobile {
    display: block;
}




    
    
    
    
    Title

    
    

    
    

    
    






    
    Hello World
    



    
        
            
                
                
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    
                
            
        

        
            

                
                
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                        qui officia deserunt mollit anim id est laborum
                    
                
            
        

        
            

                
                
                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
                        sequi nesciunt.

Resize text to fit div

Answers (1)

Related Questions