foto gallery navigation - css überlagerung

Question

Ich erstelle einfache Fotogalerie (php) für eine responsive Website und wenn ein Foto angezeigt wird, möchte ich Overlay mit Navigation angezeigt haben, die mit Mouse Hover angezeigt wird (für den Desktop, einen anderen Ansatz für mobile) . Die Überlagerung (über Foto) soll div von der gleichen Breite wie das gegebene Foto sein (variable Breite), linke Navigation ist 25% von linkem Teil und rechtem 25% auf der rechten Seite. Wenn das Foto angezeigt wird und sich der Mauszeiger außerhalb des Fotos befindet, ist nichts sichtbar. Wenn der Mauszeiger über den linken Bereich schwebt, wird < angezeigt. Und> für die rechte Seite. < und> sollte vertikal zentriert sein. Ich habe es funktioniert aber nur mit absoluter Positionierung, exakte Position zu erklären, aber das Ergebnis ist nicht ansprechbar und bricht, wenn die Fenster kleiner:

jsfiddle.net/mwf5618r/ 

Ich habe versucht, mit Flex und z-index auch, aber nicht bekommen es an die Arbeit . Unten ist, was ich mit flex erstellt habe, aber nicht funktioniert. Ich muss Flex nicht verwenden, solange es reagiert.

jsfiddle.net/x1jexvb0/ 

Werden Sie mir helfen, es sauber und reaktionsfähig zu machen? Danke vielmals.

Answer 1

Ich habe einige HTML-Elemente einschließlich der CSS geändert, hoffentlich wird dies die Arbeit für Sie erledigt. Prüfen Sie auch die neue Fiddle: http://jsfiddle.net/mwf5618r/1/embed/

HTML:

<div style="position: relative;"> 

    <a href="#left" class="photo_nav left"> 
     <div id="photo_nav"> 
      &lt; 
     </div> 
    </a> 
    <a href="#right" class="photo_nav right"> 
     <div id="photo_nav"> 
      &gt; 
     </div> 
    </a> 
    <div style="margin:0;padding:0;width:100%;margin:auto;"> 
     <img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpgg" class="photo" style="width:100%;"> 
    </div> 

</div> 

CSS:

a.photo_nav { 
    position: absolute; 
    width: 25%; 
    height:100%; 
    padding: 0; 
    margin: 0; 
    opacity:0; 
    font-size: 200px; 
    text-decoration:none; 
    background:none; 
    transition: 0.3s; 
} 
a.photo_nav:hover { 
    color:#fff; 
    opacity:0.6; 
} 
a.photo_nav #photo_nav { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 
a.photo_nav.left {left: 0;} 
a.photo_nav.right {right: 0;} 
a.photo_nav.left div#photo_nav {left: 0;} 
a.photo_nav.right div#photo_nav {right: 0;} 

Nun, vielleicht das?