How can I display a div on a hover of another element using only CSS

Question

I would like to display the contents of my div extra_infowhen I hover over an image of a dog.

I saw syntax like:

.circular:hover + div.extra_info {
  display:absolute;
}

However, I can’t get it to work!
Here is my code:

.circular {
  margin-top: 50px;
  position: relative;
  z-index: 199 !important;
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.circular:hover {
  border: 2px solid #16D3AE;
}
.extra_info {
  display: none;
}

<img src=http://officialhuskylovers.com/wp-content/uploads/2015/05/Cute-dog-listening-to-music-1_1.jpg class="circular">
<div class="extra_info">
  <h3>A lovely doggy woggy</h3>
</div>

Run codeHide result

View in JSFiddle

Answer 1

You can use or in this case you can also use hereAdjacent sibling selector +General sibling selector ~Fiddle

.circular {
  margin-top:50px;
  position: relative;
  z-index:199 !important;
  float:left;
  display:block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border:2px solid #ffffff;
}
   
.circular:hover{
  border:2px solid #16D3AE;
}
  
.extra_info{
  display:none;
}

.circular:hover + .extra_info {
  display: block;
}

<img src=http://officialhuskylovers.com/wp-content/uploads/2015/05/Cute-dog-listening-to-music-1_1.jpg class="circular">

<div class="extra_info">
  <h3>A lovely doggy woggy</h3>
</div>

Run codeHide result

Answer 2

div.extra_info{
    display: none;
}

a:hover + div.extra_info{
    display: block;
}

This will work as follows.

<a>Content</a>
<div>Content display on hover</div>

Element

div can be created by a child anchor.