2

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.

Community
  • 1
  • 1
maddie
  • 1,854
  • 4
  • 30
  • 66

2 Answers2

1

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

link
  • 2,480
  • 1
  • 16
  • 18
0

.JFK {
  position: relative;
  top: 50px;
  left: 250px;
  background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
}
.JFK,
.JFK > p {
  height: 200px;
  width: 200px;
}

.JFK > p {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.link-wrapper {
  display: none;
}

.JFK:hover .link-wrapper {
  display: block;
}
<div class="JFK">
  <p>JFK</p>
  <div class="link-wrapper">
    <a href="#"><span>to</span></a>
    <a href="#"><span>from</span></a>
  </div>
</div>

There are lots of ways to solve this problem. This solution is just an example. The actual paragraph has the same hight as the .JFK so it pushes the .link-wrapper down to exactly the spot you want in the normal flow. Hope this helps or gives you some ideas.

orangeh0g
  • 418
  • 2
  • 10