CSS懸停效果與圖形和figcaption覆蓋

Question

尋找一些樣式CSS幫助。我想創建一個圖像框（這應該是鏈接）與中心文本，用彩色半透明疊加背景在圖像上雙擊。我們有這樣的給定的HTML：

<div class="figure"> 
    <a href="#" class="link1"> 
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis"> 
    <div class="figcaption">Klematis</div> 
    </a> 
</div> 

的代碼是類比圖/ figcaption HTML5結構。 這裏的情況： https://codepen.io/anon/pen/dYaYqV

懸停疊加的背景應該隱藏（這是這種情況），以及圖像提升到完全不透明。

問題1： 文本沒有以這樣的位置設置（絕對）居中。

問題2： 本例中的覆蓋度較大（在圖像的底部）由於我認爲，元件某些樣式。疊加應該與圖像一樣精確。

問題3： 文本應該隱藏，以及覆蓋的img鼠標懸停時

沒有JS如果可能的話，只有CSS期間。你能幫我嗎？謝謝，J.

Answer 1

我已經編輯好codepen例子了一下，我覺得這正是你想要的 HTML：

<div id="1" class="figure"> 
    <a href="#" class="link1"> 
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis"> 
    <div class="figcaption"><h4>Klematis</h4></div> 
    </a> 
</div> 

CSS：

.figure { 
    position: relative; 
    float: left; 
    width: 10%; 
    margin-right: 1%; 
    left:20px; 
} 
.figure a{ 
    display:block; 
    width:100%; 
    height:100%; 
    position:relative; 
    z-index:2; 
} 
.figure a img{ 
    width:100%; 
    display:block; 
} 
.figcaption { 
    font-size: 0.8em; 
    letter-spacing: 0.1em; 
    text-align: center; 
    position: absolute; 
    top: 0; 
    left:0; 
    width:100%; 
    z-index: 2; 
    height:100%; 
    background-color:rgba(0,0,0,.4); 
    transition:background-color 0.4s ease; 

} 
.figcaption h4{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    padding:0; 
    margin:0; 
    -moz-transform:translate(-50%, -50%); 
    -webkit-transform:translate(-50%, -50%); 
    transform:translate(-50%, -50%); 
} 
.figure a:hover .figcaption { 
    background-color:transparent; 
} 

對不起，忘了隱藏關於懸停的文本，這裏是編輯的codepen http://codepen.io/gopal280377/pen/QjYyLL

Answer 2

在谷歌瀏覽器上測試過，希望它適合你

分配寬度.figcaption啓用文本對齊，

移動錨點標記以代碼塊的父（我的偏好）

覆蓋溢出可能是由於未申報圖像尺寸，

<a href="#" class="link1"> 
    <div id="1" class="figure"> 
     <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis"> 
     <div class="figcaption">Klematis</div> 
    </div> 
</a> 


.figure { 
    position: relative; 
    width: 10%; 
    height: auto; 
    background:rgba(92,104,117,0.8); 
    overflow: hidden; 
    } 
.figcaption { 
    position: absolute; 
    font-size: 0.8em; 
    width: 100%; 
    letter-spacing: 0.1em; 
    text-align: center; 
    top: 50px; 
    z-index: 1 !important; 
    } 
.figure img { 
    width: 100%; 
    opacity: 0.5 
    } 
.link1:hover img { 
    opacity: 1; 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    } 
.link1:hover .figcaption { 
    display: none; 
    background:rgba(92,104,117,0.0); 
    }