Hover State Size

HTML & CSS
8

You could remove height and set a different position for bottom instead of 0 but the problem is you have no fixed height to work against because the bottom part of your div is fluid text that has no set height so all you can do is guess.

What you needed to do as I mentioned above is isolate the image in its own div and make sure the rollover code is also within that same div and then you can always match exactly the height of the image.

Here’s an example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
img{display:block;}
.imgwrap {
	float:left;
	width:30%;
	position:relative;
	margin:0 2% 20px 0;
	overflow:hidden;
}
.imgwrap img {
	width:100%;
	height:auto
}
.rollover {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.6);
	color:#fff;
	transform:translateX(-100%);
	transition:all .5s ease;
}
.roll-inner{
	display:table;
	width:100%;
	height:100%;
}
.roll-content{
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.roll-content h3,.roll-content p{width:70%;margin:auto;}
.imgwrap:hover .rollover{transform:translateX(0)}



</style>
</head>

<body>
<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg1.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>

<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg4.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg2.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg3.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>


<div class="imgwrap"> <img src="http://www.pmob.co.uk/temp/images/zimg4.jpg" alt="holiday" width="300" height="300">
  <div class="rollover">
    <div class="roll-inner">
      <div class="roll-content">
        <h3>Rollover</h3>
        <p>Rollover content to remain at center of element</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

More or less everything that you ever dreamed of :smile:

1 Like