Я использую CloudZoom, чтобы увеличить изображение.
У меня есть изображение его в div
.product_large_image {width:370px;height:370px;background:#fff;border-radius:185px;text-align:center;overflow:hidden;box-shadow:0px 0px 20px rgba(0,0,0,0.1);}
У меня overflow:hidden
, потому что это делает приятный внешний вид.
Но вот проблема, когда я нахожу изображение, и он масштабируется, CloudZoom показывает большое изображение рядом с основным изображением, но в США более крупное увеличение изображения находится в div, который говорит, что overflow: hidden
, оно скрывает это изображение с эффектом масштабирования.
Есть ли шанс сделать это изображение масштабирования видимым? возможно, с! важно.
Я думаю, что мы нацеливаем этот образ и пишем что-то, что мы можем сделать?
<div class="product_large_image">
<a href="img/index/products/01.jpg" rel="adjustX: 30, adjustY: -4" class="cloud-zoom " id="zoom1" style="display: block !important;">
<img src="img/index/products/01_small.jpg" alt="" title="Procut zoom" >
</a>
</div>
<ul class="pr_gallery">
<li>
<a href="img/index/products/01.jpg" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'img/index/products/01_small.jpg'">
<img src="img/index/products/01.jpg" alt="01">
</a>
</li>
<li>
<a href="img/index/products/02.jpg" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: 'img/index/products/02_small.jpg'"><img src="img/index/products/02.jpg" alt="02">
</a>
</li>
<li>
<a href="#"><img src="img/index/products/03.jpg" alt="03"></a>
</li>
</ul>
Попробуйте изменить правило css на изображение или элемент удалите переполнение hiden обертки
.product_large_image .cloud-zoom {width:370px;height:370px;background:#fff;border-radius:185px;text-align:center;overflow:hidden;box-shadow:0px 0px 20px rgba(0,0,0,0.1);}