マウスが特定の場所にあるときに画像が移動する

Question

画像のホバーに問題があります。私は代理店ページを作成しており、「サービス」タブがあります。 6つの画像、テキスト、ボタンがあります。

イメージをホバーするとオーバーレイがコーディングされますが、正しく機能しません。画像の少しの部分にマウスを置くと機能します（例えば、画像の中央にマウスを置くと機能しません）。

私のテキストdivに問題があることに気付きました。私がそれを削除すると、すべてうまくいった。また、私はこのdivの高さを変更したときにうまくいったのですが、私のボタンがその位置を変えました。

どうすれば解決できるか分かりましたら、感謝します。

ここに私のHTMLとCodepenです：

<div id="services"> 
    <div class="images"> 
     <div class="row1"> 
      <div class="img1"> 
      <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg"/> 
      <div class="imgHover"><p>Professional Analysys</p></div> 
      </div> 
         <div class="img2"> 
          <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" /> 
          <div class="imgHover"><p>UX/UI Design</p></div> 
         </div> 
         <div class="img3"> 
          <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" /> 
          <div class="imgHover"><p>Strategy planning</p></div> 
         </div> 
        </div> 

        <div class="row2"> 
         <div class="img4"> 
          <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" /> 
          <div class="imgHover"><p>SEO & SEM</p></div> 
         </div> 
         <div class="img5"> 
          <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" /> 
          <div class="imgHover"><p>Web Development</p></div> 
         </div> 
         <div class="img6"> 
          <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" /> 
          <div class="imgHover"><p>Social Media</p></div> 
         </div> 
        </div> 
       </div> 
    <div class="services-text"> 
        <p>We specialize in delivering the best solutions for your business. Our professional team works every day to satisfy you and improve your incomes.</p> 
        <button href="#">Request a call</button> 
       </div> 
      </div> 

http://codepen.io/anon/pen/BpaLRa

Answer 1

あなたのCSSに以下を追加しますz-indeximages上のクラス

.images { 
    text-align: center; 
    max-width: 750px; 
    max-height: 1400px; 
    margin: 0 auto; 
    position: relative; 
    bottom: 100px; 
    z-index: 9; 
} 

Answer 2

を追加します。

.row1, .row2 { 
    overflow:hidden; 
    clear:both; 
} 

Answer 3

.imagesにz-indexを使用する必要があります。positionsがレイヤを作成し、z-indexがレイヤの順序を定義しているために起こっています。

More info

z-index