Bootstrap image zoom

Question

我正在做一个电子商务网站。我使用Bootstrap。在做产品详细信息页面时应该使用什么？我希望它如下。

我想，当谈到画中画增长。

Answer 1

在这里我有一些代码可以帮助你，用纯粹的CSS来增长你的形象。

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.HoverDiv { 
    position: relative; 
    overflow: hidden; 
    border:1px solid black; 
    width:360px; 
    margin: 10px; 
} 

.HoverDiv img { 
    max-width: 100%; 
    text-align:center; 
    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
} 

.HoverDiv:hover img { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

img { 
    display: inline-block; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 5px; 
    transition: 0.3s; 
    position:relative; 
    z-index:1; 
} 

img:hover { 
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); 
    -webkit-transform: skewX(-20deg); 
    -ms-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
    -webkit-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
} 

HTML

<div class="HoverDiv"> 
<img src="http://pngimg.com/upload/tiger_PNG546.png" alt="Smiley face"> 
</div> 

DEMO

Grow image on hover