Elizabeth Elizabeth - 1 month ago 8
CSS Question

Make opaque div with text appear over image box over image upon hover

I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.

Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.

Here is my html file:

<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> <a href = "#">to</a>
<a href = "#">from</a></p>
</div>
</div>
/* continues on*/


Here is my css:

JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}

.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;

}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}

.JFK:hover{
display: block;
}

.JFK: hover transbox{
display: block;
opacity:0.6;
}


I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?

Answer

Your problem lies with these 2 pieces of code in your css:

.JFK:hover transbox p {
    display: block;
}

.JFK: hover transbox{
    display: block;
    opacity:0.6;
}

Firstly . is missing from the class transbox - is should be .transbox

Secondly there is a space between .JFK: and hover remove the space and it should all work.

.JFK:hover .transbox p {
    display: block;
}

.JFK:hover .transbox{
    display: block;
    opacity:0.6;
}