バックグラウンドホバーの色がボックス外に移動します

Question

ホバーの上にマウスを置くと、ホバーの色が画像/ボックスと100％一致しないのはなぜですか？それは何らかの理由で1ピクセル上に移動したように見えます...また、「プロジェクト名」と「プロジェクトの説明」のテキストをボックスの中央に移動するにはどうすればよいですか？私は変換して、<center>タグで試しましたが、何も動作しません。

ギャラリーのコードに：

<div class="row no_gutter no_padding" id="projects"> 
     <div class="col-md-4 project_box slideanim"> 
      <a href="#"> 
       <div class="project_data"> 
        <h4>Project name</h4> 
        <h5>Project description data</h5> 
       </div> 
       <img src="<?php bloginfo('template_url');?>/images/portfolio/default.jpg" class="img-responsive"> 
      </a> 
     </div> 

     <div class="col-md-4 project_box slideanim"> 
      <a href="#"> 
       <div class="project_data"> 
        <h4>Project name</h4> 
        <h5>Project description data</h5> 
       </div> 
       <img src="<?php bloginfo('template_url');?>/images/portfolio/default.jpg" class="img-responsive"> 
      </a> 
     </div> 
     <div class="col-md-4 project_box slideanim"> 
      <a href="#"> 
       <div class="project_data"> 
        <h4>Project name</h4> 
        <h5>Project description data</h5> 
       </div> 
       <img src="<?php bloginfo('template_url');?>/images/portfolio/default.jpg" class="img-responsive"> 
      </a> 
     </div> 
    </div> 

CSS：削減hoverルール（すなわち、非ホバー規則ですでに何である）、からすべての余分の情報を消去する

.no_gutter > [class*='col-'] { 
    padding-right: 0; 
    padding-left: 0; 
    margin-left:0; 
    margin-right:0; 
} 
.no_padding { 
    padding: 0; 
} 
.project_box{ 
    /* 
    border:1px solid #1E88E5; 
    box-sizing: border-box;*/ 
} 

.project_data{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    color: transparent; 
    user-select: none; 
    /*center text horizontally and vertically*/ 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 

    /*non-selectable text by mouse boxing*/ 
    -webkit-touch-callout: none; /* iOS Safari */ 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
    -khtml-user-select: none; /* Konqueror */ 
    -moz-user-select: none;  /* Firefox */ 
    -ms-user-select: none;  /* Internet Explorer/Edge */ 
    user-select: none; 
} 

.project_data:hover{ 
    width:100%; 
    height:100%; 
    color: #fff; 

    /*center text horizontally and vertically*/ 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 

    background-color:#1E88E5; 
    opacity: 0.8; 
} 

Answer 1

試してみますこのCSSルールは次のとおりです。

.project_data:hover{ 
    color: #fff; 
    background-color:#1E88E5; 
    opacity: 0.8; 
} 

Answer 2

親コンテナを作成しますposition: relative。 私はギャラリーが見えるようになっているものはかなりわからないんだけど、予想通りのルールで

.project_box{ 
    position: relative; 
    display: inline-block; 
    line-height:0; 
    } 

.project_data{ 
    padding: 10px; 
    box-sizing: border-box; 
} 

ギャラリーが動作します。

絶対配置された要素は常に次の相対的に配置された親を参照のために使用するため、絶対配置されたブロック要素は常に次の相対的に配置された親内のすべての利用可能な水平領域を占めます。

には相対的な要素はあなたの例ではありませんでしたので、最初は私のJsFiddleで全身を越え拡大オーバーレイ - 私は似たような仮定は、他のすべてのルールだけで美容効果のためのものですあなたのサイトに

が起こりました;）あなたの心の質問については https://jsfiddle.net/svArtist/7b7hfy0h/

：

はJsFiddleを参照してくださいあなたはそうあなたも背景に影響を与えるだろう、あなたの方法で、テキスト用に別のdivを使用する必要があります。

ここで最初の例を参照してください。 https://jsfiddle.net/svArtist/0pqg39Lh/

を（HTMLのみ1つの変更、残りはCSS内で移動することができることを必要とする）