Bootstrap version 5 Text On Image When Hover or Static Text

I couldn’t find an easy tutorial how to do text on image for Bootstrap version 5 when you mouse hover an image or a static text on the image.
So I have to try few solutions before get it right.

The solution is using purely CSS without any Javascript

The CSS

.text-on-image {
    position: relative;
}

.text {
    position: absolute;   
    bottom: 0;
    left: 0;
    display: none;
}

.text-active{
    position: absolute;   
    bottom: 0;
    left: 0;
    display: block;
    background: white;
    width: 100%;
    height: 20%;
}

.text-on-image:hover .text {
    display: block;
    background: blue;
    width: 100%;
    height: 20%;
}

.text-on-image {

position: relative;

}

.text {

position: absolute;

bottom: 0;

left: 0;

display: none;

}

.text-active{

position: absolute;

bottom: 0;

left: 0;

display: block;

background: white;

width: 100%;

height: 20%;

}

.text-on-image:hover .text {

display: block;

background: blue;

width: 100%;

height: 20%;

}

How To Use It

Wrap the image in a div with class=”text-on-image”
Under the div wrapper,include a text div with class=”text”
You can add link or button

Demo on JSFiddle

The CSS

How To Use It

Related Posts