Hover over thumbnail image and overlay with a transparent magnifier image

Question

First of all, I'm using Volusion. Here's a sample for a category page of my website: http://www.gtsimulators.com/Somso-Models-s/87.htm

So if you're familiar enough with Volusion, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:

I need to add a overlay image with a transparent magnifier when hover over the thumbnail image on categories (please check link above), so the visitor will know that clicking on the image will take an action. I know it can be made with CSS only but I'm not sure which classes or ids to pull.

I know it looks like a question that have already been answered. But since we're talking about Volusion specifically, it might help a lot of people using the same platform.

Here's a piece of the code for the HTML thumbnail: (it is auto-generated and I can't edit it)

<div class="v-product">
<a href="http://www.gtsimulators.com/aging-simulation-suit-gert-p/ppd1002.htm" title='Aging Simulation Suit' class="v-product__img">
<img src="/v/vspfiles/photos/PPD1002-1.jpg" style="alt="Aging Simulation Suit"></a>
<a href="http://www.gtsimulators.com/aging-simulation-suit-gert-p/ppd1002.htm" class="v-product__title productnamecolor colors_productname" title="Aging Simulation Suit GERT, PPD1002"> 
Aging Simulation Suit GERT
</a>
</div>

I've already implemented opacity and a border on it. But I need an overlay image of a magnifier. If you can help me by answering with the exact structure of classes and ids from my website, would be perfect.

Here's the piece of CSS I modified already:

.v-product__img 
{  display: inline-block;  min-height: 170px !important;  text-align: center;  vertical-align: middle;  width: 100%;
}
.v-product__img > img {
border:none !important;
} 
.v-product__img > img:hover {
border:3px solid #DDD !important;
border-radius:5px !important;
margin-top:-3px !important;
opacity:.75;
}

If you have any other suggestion of how to implement it, I would appreciate it.

I will be glad to provide more information if needed.

Please help. Thanks!

Answer 1

here's an example of a way to do it: https://jsfiddle.net/68j4u3s7/

The condition being that your magnifier image would be the background image. You could also reverse it, making the actual image the background image and the magnifier image the img src, change the opacity to the magnifier image CSS styles to hide it on load and show it on hover... but that option may be a bit odd.

HTML

<div id="your-image">
  <img src="http://placecage.com/g/200/300" alt="">
</div>

CSS

#your-image {
  background-image: url('http://placecage.com/c/200/300');
  background-position: 0 0;
  background-repeat: no-repeat;
}

#your-image:hover img {
  opacity: 0.35;
}

Answer 2

All right. I was messing around and I found the answer with :after. Here's the code I used for the desired effect:

.v-product__img:hover:after {content:""; position:absolute; margin:0 auto; width:90px; height:90px; border-radius:90px; top:15px; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.5); 
background-image: url('/v/vspfiles/templates/vws/images/buttons/product-magnifier.png');
background-repeat: no-repeat;
background-position: center; 
transition: all 0.5s;
-webkit-transition: all 0.5s;
opacity: 1;
}