[英]Hover over thumbnail image and overlay with a transparent magnifier image
首先,我正在使用Volusion。 這是我的網站類別頁面的示例: http : //www.gtsimulators.com/Somso-Models-s/87.htm
因此,如果您對Volusion足夠熟悉,您將知道它在定制方面非常有限。 這是我很難弄清楚的事情:
將鼠標懸停在類別的縮略圖上時,需要添加帶有透明放大鏡的疊加圖像(請單擊上面的檢查鏈接),以便訪問者知道單擊該圖像將執行操作。 我知道只能用CSS制成,但是我不確定要拉哪個類或ID。
我知道這看起來像一個已經被回答的問題。 但是,由於我們是在專門討論Volusion,因此它可能會幫助使用同一平台的許多人。
這是HTML縮略圖的一部分代碼:(它是自動生成的,我無法對其進行編輯)
<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>
我已經實現了不透明度和邊框。 但是我需要一個放大鏡的疊加圖像。 如果您可以通過回答我網站上類和id的確切結構來幫助我,那將是完美的。
這是我已經修改過的CSS:
.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;
}
如果您對如何實施有其他建議,我將不勝感激。
如果需要,我將很高興提供更多信息。
請幫忙。 謝謝!
這是一種實現方法的示例: https : //jsfiddle.net/68j4u3s7/
條件是您的放大鏡圖像將是背景圖像。 您也可以反轉它,將實際圖像作為背景圖像,將放大鏡圖像作為img src,將放大鏡圖像的不透明度更改為CSS樣式以在加載時將其隱藏並在懸停時顯示...但是該選項可能有點奇。
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;
}
好吧。 我在胡鬧,發現:after的答案。 這是我用來達到預期效果的代碼:
.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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.