鏈接打破了圖像鏈接

Question

首先，來看看這個：http://jsfiddle.net/muncherelli/1kkus9bd/1/

我有兩個問題與我的HTML/CSS：

1. 有一個環節是在這個HTML中包裹着img。我希望在這個圖像/鏈接的頂部有一些文字和其他鏈接，但圖像仍然應該作爲鏈接（當你將鼠標懸停在它上面時變暗）。嘗試使用「blog-post-feature-overlay-content」類去除整個div，並且您會看到它正常工作，但是一旦我將該div添加回來，它將無法工作。
2. 爲了讓圖像在懸停時變暗，我使用背景顏色爲黑色的不透明度選擇器。我還有一個邊框舍入屬性，用於柔化圖像的角落（和底層div）。底部（圖片下方）似乎有一條黑線，有時候，根據我的瀏覽器的寬度，有些黑色通過角落。我怎麼能擺脫這個？

有一件事要考慮：我使用的引導框架，我不知道是影響或幫助或傷害的情況。

（不知道我是否需要在這裏提出兩個問題，但他們似乎是相關的）。

下面是HTML/CSS我使用：

HTML：

<br /> 
<div class="container"> 
    <div class="row"> 
     <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div> 
     <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 nopadding"> 
      <div class="blog-post-feature-overlay-container roundy"> 
       <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane"> 
        <img src="http://cache.blog.munchimages.com/blog/wp-content/uploads/2015/07/MI_73-Feature-1200x620.jpg" class="img-responsive roundy blog-post-feature-image" /> 
       </a> 
       <div class="blog-post-feature-overlay-content"> 
        <div class="blog-post-feature-overlay-content-top text-right"> 
         <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-category-box general-font-title-serif transition-color-ease-500">Latest Post</a> 
         <a href="http://munchimages.com/blog/session-stories/" class="blog-category-box general-font-title-serif transition-color-ease-500">Session Stories</a> 
        </div> 
        <div class="blog-post-feature-overlay-content-bottom"> 
         <h1 class="general-font-title-serif"> 
          <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-post-feature-overlay-content-title color-white transition-color-ease-500"> 
           4th of July 
          </a> 
         </h1> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div> 
    </div> 
</div> 

CSS：

.general-font-title-serif { 
    font-family:'Cinzel', serif; 
} 
.nopadding { 
    margin: 0 !important; 
    padding: 0 !important; 
} 
.blog-post-feature-image:hover { 
    opacity: 0.9; 
} 
.color-white { 
    color: white; 
} 
.roundy { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 
.transition-color-ease-500 { 
    -moz-transition: background-color 500ms, color 500ms ease-out; 
    -ms-transition: background-color 500ms, color 500ms ease-out; 
    -o-transition: background-color 500ms, color 500ms ease-out; 
    -webkit-transition: background-color 500ms, color 500ms ease-out; 
    transition: background-color 500ms, color 500ms ease-out; 
} 
div.blog-post-feature-overlay-container { 
    background-color: #000; 
    position: relative; 
} 
div.blog-post-feature-overlay-content { 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 
div.blog-post-feature-overlay-content-top { 
    position: absolute; 
    right: 20px; 
    top: 20px; 
} 
div.blog-post-feature-overlay-content-bottom { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
} 
a.blog-category-box { 
    background-color: #ccc; 
    background-color: rgba(0, 0, 0, 0.4); 
    color: #fff; 
    font-size: 13px; 
    padding: 5px 15px; 
    text-transform: uppercase; 
} 
a.blog-category-box:hover { 
    background-color: rgba(0, 0, 0, 0.6); 
    text-decoration: none; 
} 
a.blog-post-feature-overlay-content-title { 
    text-shadow: 1px 1px #000; 
} 
a.blog-post-feature-overlay-content-title:hover { 
    color: #ddd; 
    text-decoration: none; 
} 
@media (max-width: 768px) { 
    .roundy { 
     -moz-border-radius: 0; 
     -webkit-border-radius: 0; 
     border-radius: 0; 
    } 
    h1 { 
     font-size: 30px; 
    } 
} 

謝謝！

Answer 1

刪除position:absolute從div.blog-post-feature-overlay-content

div.blog-post-feature-overlay-content { 
height: 100%; 
width: 100%; 
} 

fiddle

當position: absolute;此元素需要它從文件流上使用，並且top:0和left:0地方元件 - 儘管不可見地 - 相對於它的父母blog-post-feature-overlay-container覆蓋它的全部，因爲100％的高度和100％的寬度設置。 刪除position: absolute;該元素保留在文檔流中並位於鏈接後面（因爲它們位於絕對位置），因爲它位於包含文檔樹中鏈接的元素之前