Using Just 2 CSS Class Display Text On Bootsratp 5 Card When Hover

Taib Islam Dipu
1 min readDec 19, 2021

In this blog, I will show you how to show text when hovering over a bootstrap 5 card image. It is a very popular and easy thing to do.

CSS Absolute Position

First, you have to take 2 divs. The first div will have the image, and the second div will have text. Now if we make the position: absolute and top: 0 of the div in the text, then the text of this text will rise from its place and sit on the image. In the initial state, the text will not be seen, so the display of the card-text: none.

Since hovering on the card will show the card-text, so we have to write display: block in .card-text style

This is the end of our work. Then the rest of the work has to be customized according to the design.

Click on this link to see the demo of what I have said so far: https://codesandbox.io/s/beautiful-hellman-gcwho

--

--