私のコードは余分なものを生産しています<a>リンク

私はなぜ、私のCSSの何かが私のHTMLコードの重複を作成していると思います。私はかなりCSSの新しいので、多分私は何かが不足している！ここで私のコードは余分なものを生産しています<a>リンク

は私のHTMLです：

<section class="once"> 
<div class="third" id="third"> 
<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 
</div> 
</section>

そして、ここでは私のCSSです：

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

section.once { 
    width: 100%; 
    position: relative; 
    float: left; 
    padding-bottom: 10px; 
    z-index: 2; 
} 

.third { 
    margin-top: -3.95%; 
} 

.third .post { 
    display: block; 
    width: 30.7%; 
    margin-top: 3.95%; 
    padding: 10%; 
    float: left; 
    position: relative; 
    background-size: cover; 
    background-position: center; 
} 

.post-header { 
    position: absolute; 
    right: 30px; 
    bottom: 30px; 
    left: 30px; 
    } 

.homepage-title { 
    font-size: 1.375em; 
    line-height: 120%; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #222; 
    word-break: break-word; 
    -ms-word-break: break-word; 
} 

.post-overlay { 
    background: rgba(0,0,0,0.75); 
    opacity: 0; 
} 

.post-header { 
    bottom: 35px; 
} 

::selection { 
    background: #444; 
    color: #FFF; 
}

これはサンプル画像とURLです：http://69.195.124.168/~onceweso/?page_id=544 （パスワード：1回）

結局私目標は、テキストオーバーレイを追加することです。

ありがとうございました！

出典

2016-04-13 Katie Raynolds