Bilder mit Schweben auf Schieberegler bootstrap3 vergrößern Dia-Karussell

Question

Ich sehe this code sample, um ein Bild zu vergrößern.

Ich versuche es in bootstrap3 Slide Carousel verwendet.

Ich versuche 'vergrößern' Klasse bootstrap3 Diakarussel Elemente hinzufügen .:

<div class="item active"> 
    <div class="item-item col-md-3 col-sm-4"> 
    <a href="#"> 
     <img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge"> 
    </a> 
    </div> 
</div> 

css:

.enlarge { 
    width: 100%; 
    float: left; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
.enlarge:hover { 
    width: 120%; 
     -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    cursor: pointer; 
} 

Sie sehen können here in jsfiddle ändern.

aber es kann nicht vergrößern.wie kann ich es tun?

Answer 1

Das Problem ist, dass, wenn Sie die Breite des Bildes zu 120% annehmen möchten, die Erhöhung einwandfrei funktionieren wird. Aber bootstrap.min.css hat die folgenden Stileigenschaften für img Element.

CSS:

.img-responsive { 
    display: block; 
    height: auto; 
    max-width: 100%; 
} 

Damit sind Sie nicht in der Lage über 100% maßstäblich, wenn Sie die Klasse hinzufügen.

.carousel .img-responsive{ 
    max-width:none; 
} 

Es wird die CSS in Bootstrap außer Kraft setzen, wenn Sie aus irgendeinem Grund Sie nicht in der Lage sind, um die Änderungen sehen Sie !important hinzufügen können, die auf Priorität außer Kraft gesetzt wird.

.carousel .img-responsive{ 
    max-width:none !important; 
} 

Dies gilt für alle Bilder unter den Karussells.

Wenn Sie nur für ein Karussell angeben, können Sie die ID des Karussells angeben, wie

#myCarousel .img-responsive{ 
    max-width:none; 
} 

hier eine Arbeits DEMO ist.

JSFiddle Demo