Add link to before and after pseudo elements - html

Question

Here I have two blogs, each has an Image, a heading and blog excerpt. When you hover over the blog an overlay appears on the image. I don't want the whole blog to act as a link, What I actually want is I want the heading and overlay both to act as a link. Giving the link to the heading was easy. I have the link to the image but when the overlay covers the image, the link goes off. Just need the overlay to act as a link too.
Here is the Fiddle
.row {
position: relative;
width: 1140px;
margin: 0 auto 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: "";
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
height: 0;
width: 100%;
position: absolute;
bottom: 0;
display: block;
}
.blog-item-inner:hover .blog-img-inner:before {
height: 100%;
}
.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="blog1">
<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 easiest way is to wrap .blog-img-inner with a and your problem will be solved, check the updated snippet:
.row {
position: relative;
width: 1140px;
margin: 0 auto 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: "";
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
height: 0;
width: 100%;
position: absolute;
bottom: 0;
display: block;
}
.blog-item-inner:hover .blog-img-inner:before {
height: 100%;
}
.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">
<a href="#"><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></a>
<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">
<a href="#"><div class="blog-img-inner">
<img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog1">
<div class="blog-post-date">
<p>12 <span>JUN</span></p>
</div>
</div></a>
<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

.row {
position: relative;
width: 1140px;
margin: 0 auto 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;
}
.overly {
content: "";
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
height: 0;
width: 100%;
position: absolute;
bottom: 0;
display: block;
}
.blog-item-inner:hover .overly {
height: 100%;
}
.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">
<a href="#"><img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog1">
<span class="overly"> </span>
</a>
<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">
<a href="#"><img src="https://image.ibb.co/b8UnFw/blog1.jpg" alt="blog1">
<span class="overly"> </span>
</a>
<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 3

Simply put some JS on wrapper <div class="blog-item-inner clearfix" onClick="location.href='http://example.com'">
.row {
position: relative;
width: 1140px;
margin: 0 auto 40px;
}
.blog-item-inner {
background-color: #fbfbfb;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.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: "";
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
height: 0;
width: 100%;
position: absolute;
bottom: 0;
display: block;
}
.blog-item-inner:hover .blog-img-inner:before {
height: 100%;
}
.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" onClick="location.href='#'">
<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="blog1">
<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>