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