Bootstrap Bild zoomen

Question

Ich mache eine E-Commerce-Website. Ich benutze Bootstrap. Was sollte ich bei der Produktdetailseite verwenden? Ich möchte, dass es so ist.

Ich möchte das Bild wachsen, wenn es um das Bild kommt.

Answer 1

Hier habe ich etwas Code, der Ihnen helfen kann, Ihr Image mit reinem CSS zu vergrößern.

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