Solution 1 :

Use the :hoverselector to toggle the text-box from display: none; to display: block/flex;

.hover-box {
  position: relative;

img {
  width: 100%;

.hover-box > div {
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);

.hover-box:hover > div {
  display: flex;
<div class="hover-box">
  <img src="">
  <div>Random Text</div>

Solution 2 :

Add a title attribute to your image tag.

<img src="" alt="" title="This text will be displayed on hover">

Problem :

I have this:

 <div class="team-area">
                  <img src="" alt="" >
                    <div class="socials">
                        <a href="" target="_blank"><i class="fa fa-linkedin" style="margin-top: 6px;"></i></a>
                        <!-- <a href=""><i class="fa fa-phone" style="margin-top: 6px;"></i></a> -->
                        <a href=""><i class="fa fa-envelope" style="margin-top: 6px;"></i></a>
                        GA <span>Founder</span></h2>
                    <h5>Rome, ON</h5>

(without css of course). and what i want to do is add an affect where if you hover over it, it displays text over the image. I tried to dot it with mouseover, but it isn’t what i want. can anyone help me do this?


Comment posted by Kunal Tanwar

like what do you have an example how it should look like??

Comment posted by tacoshy

why not do this with CSS? Can be easily done by using the

Comment posted by Why is β€œCan someone help me?” not an actual question?


Comment posted by

@KunalTanwar i’ve tried something like this

Comment posted by gianluca

okay yes this is close. but how do i get it on top of the image? this just shows it below. and thanks for the help btw πŸ™‚

Comment posted by tacoshy

define on top of the image

Comment posted by Community

Please provide additional details in your answer. As it’s currently written, it’s hard to understand your solution.