Extra space below the image - html

Question

Note: The answers below are for the previous question regarding transition which I've edited for now.
I've got a blog-row with two columns. Each column has an inner which consists of an image on top and content related to the blog. I've taken an overlay pseudo-element for the image so when you hover on the inner the overlay should be applied on to the image with the transition. Everything works fine except the when you hover over the image you can see about 7px of space at the bottom of the image, to cover that I need to apply as margin-bottom: -7px. This is the problem with all the images on my page.
.row {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.blog-item-inner {
background-color: #fbfbfb;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
.blog-img-inner {
position: relative;
overflow: hidden;
text-align: center;
transition: all 0.4s ease-in-out;
}
img {
height: auto;
max-width: 100%;
margin-bottom: -7px;
}
.blog-post-date {
position: absolute;
top: 35px;
left: 35px;
border: 2px solid #ffffff;
text-align: center;
width: 40px;
height: 35px;
z-index: 999;
}
.blog-post-date p {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #ffffff;
line-height: 1;
margin-top: 0px;
padding: 5px 10px;
}
.blog-post-date span {
font-family: 'Open Sans', sans-serif;
font-size: 8px;
color: #ffffff;
line-height: 1;
font-weight: 400;
margin-bottom: 0;
display: block;
margin-top: 3px;
}
.blog-title-excerpt {
padding: 40px 40px 30px;
}
.blog-title-excerpt h3 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #000000;
margin-top: 0;
margin-bottom: 15px;
}
.blog-title-excerpt p {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #888888;
margin-bottom: 0;
}
.blog-image {
position: relative;
margin-bottom: 24px;
transition: box-shadow 0.3s linear;
}
.blog-img-inner:before {
content: " ";
z-index: 10;
opacity: 0;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
}
.blog-item-inner:hover .blog-img-inner:before {
opacity: 1;
}
.blog-image .post-meta {
position: absolute;
right: 12px;
bottom: 12px;
display: block;
z-index: 15;
}
.blog-content a {
color: #222222;
text-decoration: none;
font-family: "Droid Serif", sans-serif;
}
.post-meta {
display: block;
margin-top: 10px;
cursor: pointer;
}
.post-meta span {
margin-right: 10px;
font-size: 12px;
color: #c0c0c0;
transition: all 0.3s ease-in-out;
}
.post-meta span:hover {
color: #777777;
}
.col6 {
width: 47.96%;
}
.col {
display: inline-block;
float: left;
margin-right: 4%;
}
.col:last-child {
margin-right: 0;
}
<div class="row clearfix">
<div class="col col6 blog-items">
<div class="blog-item-inner clearfix">
<div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog1">
<div class="blog-post-date">
<p>18 <span>DEC</span></p>
</div>
</div>
<div class="blog-title-excerpt">
<h5 class="fancy-heading-s1">ENDLESS ROAD STARTS</h5>
<p>No one rejects, dislikes, or avoids pleasure those who do not know a pulse</p>
<div class="post-meta">
<span><i class="fa fa-thumbs-o-up"></i> 183</span>
<span><i class="fa fa-comment-o"></i> 57</span>
</div>
</div>
</div>
</div>
<div class="col col6 blog-items">
<div class="blog-item-inner">
<div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog6 Image">
<div class="blog-post-date">
<p>12 <span>JUN</span></p>
</div>
</div>
<div class="blog-title-excerpt">
<h5 class="fancy-heading-s1">ENDLESS ROAD STARTS</h5>
<p>No one rejects, dislikes, or avoids pleasure those who do not know a puIse</p>
<div class="post-meta">
<span><i class="fa fa-thumbs-o-up"></i> 120</span>
<span><i class="fa fa-comment-o"></i> 18</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

The problem is that you forgot the "s" after 0.3 in your code.
transition: all 0.3s ease-in-out;
.row {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.blog-item-inner {
background-color: #fbfbfb;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
.blog-img-inner {
position: relative;
overflow: hidden;
text-align: center;
transition: all 0.4s ease-in-out;
}
.blog-post-date {
position: absolute;
top: 35px;
left: 35px;
border: 2px solid #ffffff;
text-align: center;
width: 40px;
height: 35px;
z-index: 999;
}
.blog-post-date p {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #ffffff;
line-height: 1;
margin-top: 0px;
padding: 5px 10px;
}
.blog-post-date span {
font-family: 'Open Sans', sans-serif;
font-size: 8px;
color: #ffffff;
line-height: 1;
font-weight: 400;
margin-bottom: 0;
display: block;
margin-top: 3px;
}
.blog-title-excerpt {
padding: 40px 40px 30px;
}
.blog-title-excerpt h3 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #000000;
margin-top: 0;
margin-bottom: 15px;
}
.blog-title-excerpt p {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #888888;
margin-bottom: 0;
}
.blog-image {
position: relative;
margin-bottom: 24px;
transition: box-shadow 0.3s linear;
}
.blog-img-inner:before {
content: " ";
z-index: 10;
opacity: 0;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
}
.blog-item-inner:hover .blog-img-inner:before {
opacity: 1;
}
.blog-image .post-meta {
position: absolute;
right: 12px;
bottom: 12px;
display: block;
z-index: 15;
}
.blog-content a {
color: #222222;
text-decoration: none;
font-family: "Droid Serif", sans-serif;
}
.post-meta {
display: block;
margin-top: 10px;
cursor: pointer;
}
.post-meta span {
margin-right: 10px;
font-size: 12px;
color: #c0c0c0;
transition: all 0.3s ease-in-out;
}
.post-meta span:hover {
color: #777777;
}
.col6 {
width: 47.96%;
}
.col {
display: inline-block;
float: left;
margin-right: 4%;
}
.col:last-child {
margin-right: 0;
}
<div class="row clearfix">
<div class="col col6 blog-items">
<div class="blog-item-inner clearfix">
<div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog1">
<div class="blog-post-date">
<p>18 <span>DEC</span></p>
</div>
</div>
<div class="blog-title-excerpt">
<h5 class="fancy-heading-s1">ENDLESS ROAD STARTS</h5>
<p>No one rejects, dislikes, or avoids pleasure those who do not know a pulse</p>
<div class="post-meta">
<span><i class="fa fa-thumbs-o-up"></i> 183</span>
<span><i class="fa fa-comment-o"></i> 57</span>
</div>
</div>
</div>
</div>
<div class="col col6 blog-items">
<div class="blog-item-inner">
<div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog6 Image">
<div class="blog-post-date">
<p>12 <span>JUN</span></p>
</div>
</div>
<div class="blog-title-excerpt">
<h5 class="fancy-heading-s1">ENDLESS ROAD STARTS</h5>
<p>No one rejects, dislikes, or avoids pleasure those who do not know a puIse</p>
<div class="post-meta">
<span><i class="fa fa-thumbs-o-up"></i> 120</span>
<span><i class="fa fa-comment-o"></i> 18</span>
</div>
</div>
</div>
</div>
</div>

Answer 2

Use simple transition: 0.4s ease;
.row {
position: relative;
width: 100%;
margin-bottom: 40px;
}
.blog-item-inner {
background-color: #fbfbfb;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}
.blog-img-inner {
position: relative;
overflow: hidden;
text-align: center;
transition: all 0.4s ease-in-out;
}
.blog-post-date {
position: absolute;
top: 35px;
left: 35px;
border: 2px solid #ffffff;
text-align: center;
width: 40px;
height: 35px;
z-index: 999;
}
.blog-post-date p {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #ffffff;
line-height: 1;
margin-top: 0px;
padding: 5px 10px;
}
.blog-post-date span {
font-family: 'Open Sans', sans-serif;
font-size: 8px;
color: #ffffff;
line-height: 1;
font-weight: 400;
margin-bottom: 0;
display: block;
margin-top: 3px;
}
.blog-title-excerpt {
padding: 40px 40px 30px;
}
.blog-title-excerpt h3 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #000000;
margin-top: 0;
margin-bottom: 15px;
}
.blog-title-excerpt p {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #888888;
margin-bottom: 0;
}
.blog-image {
position: relative;
margin-bottom: 24px;
transition: box-shadow 0.3s linear;
}
.blog-img-inner:before {
content: " ";
z-index: 10;
opacity: 0;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-o-transition: 0.4s ease;
}
.blog-item-inner:hover .blog-img-inner:before {
opacity: 1;
}
.blog-image .post-meta {
position: absolute;
right: 12px;
bottom: 12px;
display: block;
z-index: 15;
}
.blog-content a {
color: #222222;
text-decoration: none;
font-family: "Droid Serif", sans-serif;
}
.post-meta {
display: block;
margin-top: 10px;
cursor: pointer;
}
.post-meta span {
margin-right: 10px;
font-size: 12px;
color: #c0c0c0;
transition: all 0.3s ease-in-out;
}
.post-meta span:hover {
color: #777777;
}
.col6 {
width: 47.96%;
}
.col {
display: inline-block;
float: left;
margin-right: 4%;
}
.col:last-child {
margin-right: 0;
}
<div class="row clearfix">
<div class="col col6 blog-items">
<div class="blog-item-inner clearfix">
<div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog1">
<div class="blog-post-date">
<p>18 <span>DEC</span></p>
</div>
</div>
<div class="blog-title-excerpt">
<h5 class="fancy-heading-s1">ENDLESS ROAD STARTS</h5>
<p>No one rejects, dislikes, or avoids pleasure those who do not know a pulse</p>
<div class="post-meta">
<span><i class="fa fa-thumbs-o-up"></i> 183</span>
<span><i class="fa fa-comment-o"></i> 57</span>
</div>
</div>
</div>
</div>
<div class="col col6 blog-items">
<div class="blog-item-inner">
<div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog6 Image">
<div class="blog-post-date">
<p>12 <span>JUN</span></p>
</div>
</div>
<div class="blog-title-excerpt">
<h5 class="fancy-heading-s1">ENDLESS ROAD STARTS</h5>
<p>No one rejects, dislikes, or avoids pleasure those who do not know a puIse</p>
<div class="post-meta">
<span><i class="fa fa-thumbs-o-up"></i> 120</span>
<span><i class="fa fa-comment-o"></i> 18</span>
</div>
</div>
</div>
</div>
</div>