knuxyl knuxyl -4 years ago 106
CSS Question

Image on image overlay on hover with Javascript

I have a php sql query that will generate a lot of images, and I need a code that will overlay a semi transparent image on top of the original image on hover.

I've seen a lot of code to do this with CSS, but that will add a ton of html code that I don't think is needed. The query can return up to like 4000 results with 40x40 images and I need just one overlay image to overlay all of them (only the one hovering) on hover.

So technically, this is what I need

Javascript

find class or id iconoverlay
onhover overlay this transparent image


HTML

<img src="" class or id="iconoverlay" />


I'm currently using JQuery in my site but I'm not familiar with javascript.

Answer Source

If you have a span, a or similar block tag wrapping img. You can do this:

<a class="imgHover" href="#"><img src="" /></a>

<style>
    .imgHover { display: inline-block; position: relative;}
    .imgHover:after {content:''; width: 100%; height: 100%; background: #000 url('MyPlaceholderURI.jpg') no-repeat center center; display: block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s linear; }
    .imgHover:hover:after {opacity: 1}
</style>

You can see this in action here: https://codepen.io/fabioarantes89/pen/rwMqNE

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download