Elizabeth Elizabeth - 1 month ago 12
CSS Question

Text/Link appear on hover

I tried the solutions here and here with no luck. My css file as it is:

.JFK {
position: relative;
left: 250px;
height: 200px;
width: 200px;
bottom: -45px;
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;
}
.JFK a p{
position: relative;
top: -130px;
display: none;
}
.JFK a:hover p{
display: block;
}

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


My html:

<div class = "JFK">
<p>JFK</p>
<a href = "#"><p>to</p></a>
<a href = "#"><p>from</p></a>
</div>


I'm trying to have links appear at the bottom of the image upon hover. The solutions in previous posts have not worked. With my current setup, I cannot see "TO" or "FROM" at all when I load the page.

Answer

The hover should be on the .JFK not the .JFK a When you hover over the .JFK it should make the .JFK a p visible.

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

Here is a link to a jsfiddle with the change: https://jsfiddle.net/efv8ch70/

Hope this helps

Comments