フォトギャラリーナビゲーション - cssオーバーレイ

Question

私は応答性の高いサイト用の簡単なフォトギャラリー（php）を作成しています。写真が表示されたらマウスオーバーでナビゲーションが表示されます（デスクトップ用、モバイル用の別のアプローチ） 。オーバーレイ（写真上）は、指定された写真と同じ幅のdiv（可変幅）であると考えられ、左のナビゲーションは左の部分の25％、右の部分は右の25％です。写真が表示され、マウスカーソルが写真の外側にある場合、何も表示されません。マウスカーソルが左の部分に移動すると、大きな番号<が表示されます。そして>右側に。 <と>は、垂直方向にセンタリングする必要があります。 私はそれが正確な位置を宣言しますが、唯一の絶対位置での作業だが、結果は応答しないで、窓がある休憩時に小さい：

jsfiddle.net/mwf5618r/ 

私はあまりにもフレックスとzインデックスを使用してみましたが、それは動作するように取得していません。以下は私がflexで作成したものですが、うまくいきません。私は応答がある限り、フレックスを使用する必要はありません。

jsfiddle.net/x1jexvb0/ 

あなたはそれをきれいにして反応的にするのを手伝ってくれますか？どうもありがとう。

Answer 1

CSSに含まれるいくつかのHTML要素を変更しました。うまくいけば、これはあなたのために行われます。 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;} 

まあ多分これも新しいフィドルをチェック！