I have created a photo list section on my webpage.
<div id="main_post_photo">
<%
for(var q=0;q<resolve.length;q++){
if(resolve[q].images.length>=1){%>
<a href='/post/<%= resolve[q]._id%>'><img src="../uploads/<%= resolve[q].images[0].images %>" width=150px height=150px></a>
<%}}%>
</div>
I want to add a black cover effect with rgba(0,0,0,0.3) when the mouse hovers over the image.
However, I am facing an issue where the width of the anchor tag doubles upon hover.
Here is the CSS I have used:
#main_post_photo>a:hover:after{
content: "";
left:-150px;
width: 150px;
height: 150px;
background: rgba(0,0,0,0.3);
position: relative;
display: inline-block;
}
Can someone provide guidance on how to fix this issue without affecting the positioning of other elements?