CSS hover effect with figure and figcaption overlayed - html

Question

Looking for some styling CSS help. I want to create an image box (that should be link) with centered text that is diplaying over the image with color half-transparent overlay background. We have such given 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>
The code is analogical of figure/figcaption HTML5 structure.
Here's the case:
https://codepen.io/anon/pen/dYaYqV
On hover overlay background should hide (which is the case), and opacity of image increase to full.
Problem 1:
Text is not centered with such position setting (absolute).
Problem 2:
The overlay in this example is bigger (in the bottom of the image) due to some styling of , I think, element. Overlay should be exact as the image.
Problem 3:
Text should hide as well as overlay during img mouse hover
No JS if possible, only CSS. Can you help? Thanks, J.

Answer 1

I have edited your codepen example a bit, and i think this is exactly what you want
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;
}
sorry, forget to hide text on hover, here is the edited codepen http://codepen.io/gopal280377/pen/QjYyLL

Answer 2

tested on google chrome, hope it works for you
assign width to .figcaption to enable text-align,
moved anchor tag to parent of code block (my preference)
overlay overflow is probably due to undeclared image dimensions,
<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);
}