Whenever I hover over specific points below an image link wrapped in a div, it triggers the hovering effect for the CSS-created image link. Despite trying various solutions like overflow:hidden and display:inline-block, nothing seems to resolve this issue. Below is my code snippet along with a jsfiddle link. Appreciate any assistance.
HTML:
<div class="div_for_projects">
<div class="project_inner_divs">
<div id="portfolio_project">
<div id="portfolio_project_child">
<a href="index.html">
<!--
Image Source:
http://www.connectwithchildlife.com/2015/10/child-life-portfolio.html
-->
<img class="portfolio_page_projects"
src="http://www.vandelaydesign.com/wp-content/uploads/portfolio2.jpg"
alt="portfolio_image">
</a>
<p>
<a href="index.html"
class="text_align project_description">
PROJECT
</a>
</p>
<a href="#">
<img class="portfolio_sm_links"
src="https://maxcdn.icons8.com/Share/icon/Editing//arrow_filled1600.png"
alt="Portfolio Image Link">
</a>
</div>
</div>
</div>
</div>
CSS:
.div_for_projects {
width: 100%;
height: 420px;
}
.project_inner_divs {
float: left;
width: 35%;
}
#portfolio_project {
position: relative;
width: 426px;
height: 420px;
pointer-events: none;
transition-duration: 0.4s;
}
#portfolio_project_child {
pointer-events: auto;
width: 100%;
height: 100%;
}
#portfolio_project:hover {
-webkit-filter: brightness(70%);
}
#portfolio_project:hover .project_description {
visibility: visible;
opacity: 1;
}
#portfolio_project:hover .portfolio_sm_links {
visibility: visible;
opacity: 1;
}
.portfolio_page_projects {
width: 426px;
height: 420px;
}
.project_description {
position: relative;
bottom: 250px;
visibility: hidden;
opacity: 0;
transition-duration: 0.4s;
font-size: 18px;
font-family: Tahoma, Geneva, sans-serif;
color: rgb(50, 50, 50);
display: inline-block;
left: 170px;
}
.text_align {
text-align: center;
}
.portfolio_sm_links {
width: 40px;
height: 40px;
position: relative;
bottom: 130px;
left: 350px;
visibility: hidden;
display: inline-block;
opacity: 0;
}
.portfolio_sm_links:hover {
background-color: grey;
}
jsfiddle link: https://jsfiddle.net/26vutwz9/