HTML image embed link does not work in wordpress - html

Question

could you please help me to solve my problem? Since I am trying to add URL into my image it does not do anything. I have a CSS animation inside of my image. The system is based on wordpress. After the image hover, image is not clickable after the url is set.
The html code looks like this
<div class="hover ehover1">
<img class="img-responsive" src="imageSOURCEurl" alt="" />
<div class="overlay"></div>
</div>
When I try to add url it looks like this
<div class="hover ehover1">
<a href="URL HERE DOES NOT WORK"><img class="img
responsive" src="imageSOURCEurl"
alt="" /></a>
<div class="overlay"></div>
</div>
CSS
#lab_snippet_module .col-lg-3,
#lab_snippet_module .col-md-4,
#lab_snippet_module .col-sm-6,
#lab_snippet_module .col-xs-12 {
padding: 0!important;
}
#lab_snippet_module {
background: purple;
padding: 50px 0;
}
.hover,
.hover h2 {
text-align: center
}
.hover,
.hover .overlay {
width: 100%;
height: 100%;
overflow: hidden
}
.ehover11 .overlay::before,
.ehover12 h2::after,
.ehover7 .overlay::before {
content: ''
}
.hover button.info,
.hover h2 {
text-transform: uppercase;
color: #fff
}
.navbar-inverse {
color: #fff;
background-color: rgba(255, 255, 255, .2);
border-bottom: 1px solid #fff
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav>li>a {
color: #fff
}
.col-lg-3,
.col-md-4,
.col-sm-6,
.col-xs-12 {
padding: 0
}
.hover {
float: left;
position: relative;
cursor: default
}
.hover .overlay {
position: absolute;
top: 0;
left: 0
}
.hover img {
display: block;
position: relative
}
.ehover10 button,
.hover button.info {
display: inline-block
}
.hover h2 {
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, .6)
}
.hover button.info {
text-decoration: none;
padding: 7px 14px;
border: 1px solid #fff;
margin: 50px 0 0;
border-radius: 0;
background-color: transparent
}
.hover button.info:hover {
box-shadow: 0 0 5px #fff
}
.ehover5 button.info:hover,
.hover button.nullbutton:hover {
box-shadow: none
}
.hover button.nullbutton {
border: none;
padding: 0;
margin: 0
}
.ehover4 button.info,
.ehover42 button.info {
margin: -55px 0 0;
padding: 73px 90px;
font-weight: 400;
border: 1px solid #fff
}
.modal-open .modal,
button:focus {
outline: 0!important
}
.point {
cursor: pointer
}
.ehover1 img {
-webkit-transition: all .4s linear;
transition: all .4s linear
}
.ehover1 .overlay {
opacity: 0;
background-color: rgba(0, 0, 0, .5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.ehover1 h2 {
-ms-transform: translatey(-100px);
-webkit-transform: translatey(-100px);
transform: translatey(-100px);
opacity: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
.ehover1 button.info {
opacity: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
.ehover1:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2)
}
.ehover1:hover .overlay {
opacity: 1
}
.ehover1:hover button.info,
.ehover1:hover h2 {
opacity: 1;
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0)
}
.ehover1:hover button.info {
-webkit-transition-delay: .2s;
transition-delay: .2s
}
Thank you

Answer 1

It is because .hover .overlay {}
has a position absolute. This makes that it will "hide" your ahref functionality.
Make sure your is above the overlay to make it clickable.
For example: If I just remove the position:absolute from .hover .overlay {}, then it works. Check this plunkr as an example: https://plnkr.co/edit/6MuuVZH2LlbxTcCHblxa?p=preview