CODEWITHSUNDEEP
htmlcss
Torben
Torben

Reputation: 5494

Vertically center text on an image - dynamically

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!

Upvotes: 2

Views: 82

Answers (2)

Harshit
Harshit

Reputation: 286

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

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122047

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

Upvotes: 2

Related Questions