CodePen

HTML

            
              <!-- A take on "full item hovers" leaves me with unwanted gaps. Hover to see it. Help me out boys!-->

<section class="project">
  <img src="http://placekitten.com/380/190" alt="" />
  <div class="project-hover">
    <h2 class="project-title">
      <a href="#">Hover title</a>
    </h2>
  </div>
</section>
            
          
!
via HTML Inspector

CSS

            
              /* A take on "full item hovers" leaves me with unwanted gaps. Hover to see it. Help me out boys! */

*{font-family:Helvetica;margin:0;padding:0;}
body{padding-top:2em;}
.project {
  display: block;
  float: left;
  height: auto;
  margin: 0 2% 2%;
  position: relative;
  width: 29.16666667%;
}
.project img {
  border-radius: 4px;
  height: auto;
  margin: 0;
  max-height: 175px;
  padding: 0;
  width: 100%;
  display: block;
}
.project-hover {
  background: rgba(52, 52, 52, .9);
  border-radius: 4px;
  height: 100%;
  left: 0;
  position: absolute;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  top: 0;
  width: 100%;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.project:hover .project-hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.project-title {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-family: "Gibson", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  height: 100%;
  margin: 0;
  text-align: left;
  width: 100%;
}
.project-title a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  display: block;
  height: 100%;
  padding: 1em;
  text-decoration: none;
  width: 100%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................