Fade in a box text overlay with a hoverable dropdown - html

Question

I'm a blogger and I'm trying my best to learn to code certain things for everyday use. Today I'm trying to get a picture in which when you hover over it it fades in with a text over it and I want that text to have a drop down menu.
Ex: I have a picture of books. When hovered over the word Books appears in the middle of the picture and the photo has a transparent overlay. When you hover over the word Books a drop down menu says Hauls, Reviews, and Inspired By. I would also like to be able to just click the word Books and have it take me to all post labeled books.
Here is the code I have so far:
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #000000;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">Books</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Hauls
Reviews
Inspired By
</div>
</div>
I hope this makes sense! Thanks so much for the help!

Answer 1

First, move the dropdown-content inside middle content, because CSS hover can't access if it's not the parent element, you can change HTML markup like this.
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
-webkit-transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #000000;
display: inline-block;
color: white;
font-size: 16px;
padding: 16px 32px;
}
/* this for show dropdown */
.middle .dropdown-content {
display: none;
position: absolute;
top: 100%;
}
.middle:hover .dropdown-content {
display: block
}
<div class="container">
<img src="https://farm5.staticflickr.com/4397/35532470254_614bf14a8b_b.jpg" class="image" alt="" />
<div class="middle">
Books
<div class="dropdown-content">
Hauls
Reviews
Inspired By
</div>
</div>
</div>
I think it works like you want.. Dropdown content always shows if middle hovered.