Div not showing on hover? - html

Question

So, I'm trying to make this so when I hover over the image, the div appears. Unfortunately, I am not able to get it to do so, and I'm at a loss as to why it's not working.
Here is my code:
.summary:hover {
opacity: .6;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.summaryOverlay {
position: absolute;
margin-left: 5%;
margin-top: 3%;
height: 200px;
width: 280px;
z-index: 2;
background-color: #E7DFDD;
color: #0E0B16;
font-family: Verdana;
font-size: 15px;
opacity: .9;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
text-align: center;
display: none;
}
.summary:hover .summaryOverlay {
display: block;
}
<div class="leftAlign" id="lastWish">
<img class="summary" alt="the last wish" src="lastWish.jpg" style="width: inherit; height: inherit;" />
</div>
<div class="summaryOverlay">
Geralt is a witcher.
<br><br> Yet he is no ordinary killer-for-hire.
<br><br> His sole purpose: to destroy the monsters that plague the world.
<br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth.
</div>

Answer 1

Because .summaryOverlay isn't child of .summary, as you stated here:
.summary:hover .summaryOverlay {
display: block;
}
So you need to hover in .leftAlign (.summary's parent) which is the .summaryOverlay sibling, you need for that to use the adjacent sibling selector +
Note: remove the inline styles, they are a bad practice to use them
.summary:hover {
opacity: .6;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.summaryOverlay {
position: absolute;
margin-left: 5%;
margin-top: 3%;
height: 200px;
width: 280px;
z-index: 2;
background-color: #E7DFDD;
color: #0E0B16;
font-family: Verdana;
font-size: 15px;
opacity: .9;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
text-align: center;
display: none;
}
.leftAlign:hover + .summaryOverlay {
display: block;
}
<div class="leftAlign" id="lastWish">
<img class="summary" alt="the last wish" src="//placehold.it/100x100" />
</div>
<div class="summaryOverlay">
Geralt is a witcher.
<br><br> Yet he is no ordinary killer-for-hire.
<br><br> His sole purpose: to destroy the monsters that plague the world.
<br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth.
</div>

Answer 2

Your CSS is not asking the browser to display the div on hovering over the image as you intended. Rather, it is asking the browser to display a child of .summary which has a class summaryOverlay. img can't ever have a child element, can it? Even if it could, .summaryOverlay is not its child. So, it won't work as you intended. Try this:
#lastWish:hover + .summaryOverlay{
display:block;
}
Barring any CSS specificity issues, it should give you what want. Let me know how it goes.