Trying to make a div appear when hovering over an image [duplicate] - html

Question

This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I'm trying to make a div with some information about an image appear when I hover over the image, my code doesn't seem to work.
HTML:
< div class="batmobile-info">This is Batman's batmobile, he uses it to chase his enemies or to flee from the police.< /div>
< img class="batmobile" src="images/batmobile.png" alt="batmobile" >
CSS:
.batmobile{
position:relative;
width:500px;
height:200px;
top:350px;
left:200px;
}
.batmobile-info{
visibility:hidden;
}
.batmobile:hover .batmobile-info{
background-color:white;
text-align:center;
width:290px;
height:40px;
position:absolute;
top:500px;
left:700px;
visibility: visible;
}

Answer 1

If you reverse the order of your elements, so the img comes before the div to give you:
<img class="batmobile" src="images/batmobile.png" alt="batmobile">
<div class="batmobile-info">This is Batman's batmobile, he uses it to chase his enemies or to flee from the police.</div>
Then you could use the following CSS to show the div on hover:
.batmobile:hover + .batmobile-info {
visibility: visible;
}
The + is an adjacent sibling selector - a super useful selector!

Answer 2

One way to make this work is to use container where you'll put your img and div with information.
I used opacity instead of visibility because opactity is the property you can use in transitions.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
}
/* contiainer to center my content, not relevant to question*/
.main-container {
margin-top: 2rem;
height: calc(100vh - 2rem);
display: flex;
align-items: center;
justify-content: space-around;
}
/* image and info container */
.img-container {
display: inline-block;
position: relative;
border: 2px solid #333;
}
/* style for div with information */
.img-info {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: #eee;
transition: opacity .3s ease-in-out;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
}
/* information positioning styles */
.img-info-overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-info-above {
left: -2px;
top: -2rem;
height: 2rem;
width: calc(100% + 4px);
}
/* this part show information on hover */
.img-container:hover .img-info {
opacity: 1;
}
<div class="main-container">
<div class="img-container">
<img src="https://dummyimage.com/250x100/fff/aaa" alt="Filler image">
<div class="img-info img-info-overlay">Some info about this image</div>
</div>
<div class="img-container">
<img src="https://dummyimage.com/250x100/fff/aaa" alt="Filler image">
<div class="img-info img-info-above">Some info about this image</div>
</div>
</div>

Answer 3

The problem is in both - the HTML and CSS, you need to put the image and text in one parent block and start styling from it. I'd avoid absolute positioning and also try using opacity CSS property in case you will need to add some extra transition effects to your text block .batmobile:hover state. Check out the code and run the snippet:
body {background:#ccc}
.batmobile {
position: relative;
width: 500px;
height: 200px
}
.batmobile div p {
visibility: hidden;
background-color: white;
width: 300px;
height: 40px;
margin: 0px auto; /* Think you wanted to center the block as width is less than parent */
text-align: center /*In case you need to center text only */
}
.batmobile:hover div p {
visibility: visible;
}
.batmobile img {width: 100%}
<div class="batmobile">
<div>
<p>An excelent drone - Ryze Tello with price under $100</p>
</div>
<img src="https://bestdroneforkids.com/wp-content/uploads/2019/09/ryze-tello-drone-forkids.jpg" alt="Ryze tello drone in the air">
</div>