Looking to create a layout with three circular divs side by side where the bottom of each circle displays the beginning of an information text. Upon hovering, the full text should be revealed:
My initial approach involved setting the CSS properties for a width: 170px
and height: 170px
div with a circular background, along with using class:hover
to display the full text on hover.
However, I quickly discovered that hiding part of the text "behind" the circle, as shown in the Normal picture above, was not straightforward.
What would be the most effective way to achieve this design?