Text/Link erscheint bei Hover

Question

Ich habe die Lösungen here und here ohne Glück versucht. Meine CSS-Datei, wie es ist:

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

Mein html:

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

Ich versuche Links am unteren Rand des Bildes auf schweben zu haben scheinen. Die Lösungen in früheren Posts haben nicht funktioniert. Mit meinem derzeitigen Setup kann ich "TO" oder "FROM" überhaupt nicht sehen, wenn ich die Seite lade.

Answer 1

Der schweben sollte auf der .JFK sein nicht die .JFK a Wenn Sie die .JFK schweben über sollte es die .JFK a p sichtbar machen.

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

Hier ist ein Link zu einem jsfiddle mit der Änderung: https://jsfiddle.net/efv8ch70/

this helps

Answer 2

.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>

Es gibt viele Möglichkeiten, dieses Problem zu lösen. Diese Lösung ist nur ein Beispiel. Der eigentliche Absatz hat die gleiche Höhe wie die .JFK, also schiebt er den .link-wrapper genau auf die Stelle, die Sie im normalen Fluss haben wollen. Hoffe das hilft oder gibt dir ein paar Ideen.