I have implemented a hover effect to display an icon overlay and filter on the Instagram feed of a website I am currently working on. Everything looks perfect when I inspect the element and set the state to hover. However, when I test the website and hover over the images, the hover effect does not show up.
Why is the hover state not being acknowledged?
#insta-feed>a>img,
.ig__overlay--container {
width: 25vw !important;
height: 25vw !important;
}
.ig__overlay--container {
left: 0px;
background-color: rgba(0, 0, 0, 0);
background-size: 25px 25px;
background-position: center center;
background-repeat: no-repeat;
pointer-events: none;
z-index: 300;
}
.overlay__container {
position: absolute;
pointer-events: none;
z-index: 300;
}
#insta-feed>.overlay__container>div.ig__overlay--container:hover {
background-color: rgba(0, 0, 0, 0.3);
background-image: url({{ 'icon-socialig-menu.svg' | asset_url }} );
}<div class="social__container">
<div id="insta-feed" style="text-align: center;">
<div class="flex flex-row overlay__container">
<div class="ig__overlay--container">
</div>
<div class="ig__overlay--container">
</div>
<div class="ig__overlay--container">
</div>
<div class="ig__overlay--container">
</div>
</div
</div>