I'm pretty new to coding and currently working on a Github repository. On the same page, I have 12 clickBoxes that each have a hover effect applied where a PNG appears upon hovering. However, I've run into an issue where either the hover effect works but the clickBox doesn't, or vice versa. I believe the problem lies within the HTML code.
The specific clickBox I am focusing on is .clickBox-Ministries. Here is the CSS for the hover effect:
.clickBox-Ministries,
.png-overlay {
position: absolute;
width: 6%;
height: 14%;
top: 12%;
left: 11%;
}
.png-overlay{
/*display: none;*/
position: absolute;
width: 12%;
height: 13%;
top: 12.5%;
left: 8%;
z-index: 1;
opacity: 0;
}
.common-parent{
position: relative;
}
img.png-overlay:hover{
display: inline;
opacity: 1;
/*transition: opacity 0.1s ease-in-out;*/
cursor: pointer;
}
Setting up the HTML in this manner causes both the clickBox and hover effect to not work correctly:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
</div>
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
If I remove the closing tag from the .common-parent, the PNG hover effect works but the clickBox does not respond.
Conversely, removing the closing tag from .clickBox-Ministries allows the clickBox to function properly, but the PNG hover effect no longer works:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<!-- Main Nav -->
<div class=clickContainer>
<div class="common-parent">
<div class="clickBox-Ministries">
<img class="png-overlay" src="Ministries_Overlay.png">
</div>
Any insights on how to resolve this dilemma?