Trying to make a div appear when hovering over an image

Question

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;
}

Where should this "information div" appear? Should it overlay the image? Should it appear somewere else? — fen1x, Oct 01 '19 at 19:05
I've already set its position with ´top:500px; left:700px;´ — Lodve Grodal, Oct 01 '19 at 19:12
`.batmobile:hover .batmobile-info` looks for an element with the class `batmobile-info` that 's a descendant of an element with the class `batmobile`. That's not your hierarchy and there is no previous element selector is CSS. You'll either need JavaScript or to rearrange your elements. — j08691, Oct 01 '19 at 19:44

score 0 · Answer 1 · answered Oct 01 '19 at 19:26

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!

Did this and it worked! Thank you so much – Lodve Grodal Oct 01 '19 at 20:28 — Lodve Grodal, Oct 01 '19 at 20:28

fen1x · Answer 2 · 2019-10-01T19:39:18.977

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>

score 0 · Answer 3 · answered Oct 01 '19 at 19:41

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>

Trying to make a div appear when hovering over an image

3 Answers3