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); 
    }