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="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<div>Random Text</div>
</div>Add a title attribute to your image tag.
<img src="https://i.postimg.cc/qBcmJBrd/1.jpg" alt="" title="This text will be displayed on hover">I have this:
<div class="team-area">
<img src="https://i.postimg.cc/qBcmJBrd/1.jpg" 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>
</div>
<h2>
GA <span>Founder</span></h2>
<h5>Rome, ON</h5>
</div>(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?
like what do you have an example how it should look like??
why not do this with CSS? Can be easily done by using the
See
@KunalTanwar i’ve tried something like this
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 🙂
define on top of the image
Please provide additional details in your answer. As it’s currently written, it’s hard to understand your solution.