Vertically center text on an image - dynamically - html

Question

I have images and a text that is displayed in the center of the image when somebody is hovering over the image.
HTML looks like this:
<article>
<div class="entry-content">
<a href="http://www.linktopost.com">
<h3 class="entry-title">Ring #1</h3>
<img width="620" height="387" src="http://i.telegraph.co.uk/multimedia/archive/02725/scotch-whisky_2725818b.jpg" class="aligncenter" alt="Platzhalter_3">
</a>
</div>
</article>
CSS:
article {
float:left;
width:30%;
display:block;
}
.entry-content {
width: 620px;
margin: 0 auto;
position: relative;
height: 387px;
}
.entry-content:hover .entry-title {
color: #000;
display: table-cell;
background-color: #fff;
opacity: 0.75;
}
.entry-title {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
line-height: 387px;
text-align: center;
display: none;
}
article img {
position:absolute;
}
You can see it here:
http://codepen.io/anon/pen/rOXOez
Is there any chance to not use fixed pixel values in the CSS - so that the hover effect is valid and working for any picture? In this example I had to use the width and height of the picture in the CSS to achieve what I wanted.
Thank you!

Answer 1

Solution 1:
Relative/Absolute positioning and center with transform: translate()
https://jsfiddle.net/94efk8kz/
article {
position: relative;
}
.hover-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
color: black;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hover-content h3 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Solution 2:
Flexbox
https://jsfiddle.net/94efk8kz/1/
article {
position: relative;
}
img {
width: 100%;
}
.hover-content {
width: 100%;
height: 100%;
top: 0;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
background: white;
color: black;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Solution 3
CSS Tables
https://jsfiddle.net/94efk8kz/2/
.entry-content a {
float: left;
width:30%;
position: relative;
height: 100%;
}
.hover-content {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: white;
color: black;
opacity: 0;
bottom: 0;
right: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.v-align {
display: table;
height: 100%;
margin: 0 auto;
}
.hover-content h3 {
display: table-cell;
vertical-align: middle;
}

Answer 2

Try with these changes
.entry-content {
width: initial;
}
.entry-content:hover .entry-title {
margin: 0;
}
.article img {
display: block;
/* position: absolute; remove this,avoid using positon absolute where you can */
width: 100%;
}