After creating an image button with a transparent black hover effect, I noticed that the image no longer functions as a "button." However, the hover effect still works. Is there a way to maintain the button functionality while keeping the color overlay?
I suspect that the transparent hover overlay may be overriding the image button attribute. I'm unsure if this is the root cause of the issue.
<body>
<div class="image">
<a href="#"><input type="image" src="img/testor.jpg" name="saveForm" class="btTxt submit" id="saveForm" /></a>
</div>
</body>
.image {
position:relative;
width:726px;
height:549px;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}