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

Question

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?

score 0 · Answer 1 · answered Oct 14 '16 at 15:30

Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".

Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".

Then, is

.transbox {
    margin: 30px;
    background-color: #ffffff;
}

You wrote again with errors.

You can use:

.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;

}

score 0 · Accepted Answer · answered Oct 14 '16 at 15:33

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

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

2 Answers2