agrandir les images avec hover on slider bootstrap3 Slide Carousel

Question

Je visualise this code sample pour agrandir une image.

J'essaie de l'utiliser dans bootstrap3 Slide Carousel.

J'essaie d'ajouter 'agrandir' articles de carrousel classe bootstrap3 .:

<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; 
} 

vous pouvez voir des changements here in jsfiddle.

mais il ne peut pas agrandir. Comment puis-je le faire?

Answer 1

Le problème est que, si vous voulez augmenter la largeur de l'image à supposer 120%, l'augmentation fonctionnera parfaitement bien. Mais bootstrap.min.css a les propriétés de style suivantes pour l'élément img.

CSS:

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

vous ne sont donc pas en mesure à l'échelle ci-dessus 100% si vous ajoutez la classe.

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

Il remplace le CSS dans bootstrap, si vous une raison quelconque vous n'êtes pas en mesure d'afficher les modifications que vous pouvez ajouter !important, qui prévaudra sur la priorité.

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

Ceci s'appliquera à toutes les images sous les carrousels.

Si vous souhaitez spécifier que pour un seul carrousel, vous pouvez spécifier l'ID du carrousel, comme

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

Voici une démonstration de travail.

JSFiddle Demo