htmlcssimageoverlayvolusion

Hover over thumbnail image and overlay with a transparent magnifier image

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!

Solution

  • 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;
}