スライダの上にホバーを置いてイメージを拡大するブートストラップ3 Slide Carousel

Question

私はthis code sampleと表示して画像を拡大します。

bootstrap3 Slide Carouselで試してみます。

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

あなたが見ることができるhere in jsfiddleを変更：

は、私が '拡大' クラス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を追加してみてください。

でも拡大できません。どうすればいいですか？

Answer 1

問題は、イメージの幅を120%とすると、その増加は完全にうまくいくことになります。しかしbootstrap.min.cssには、img要素の次のスタイルプロパティがあります。

CSS：

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

したがって、あなたは、クラスを追加する場合は、上記の100%をスケーリングすることができません。

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

ます場合は、ブートストラップにあなたが優先順位に上書きされます、あなたが!importantを追加することができ、変更を表示することができない理由がCSSを上書きします。

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

これは、カルーセルの下のすべての画像に適用されます。

あなたが唯一のカルーセルのために指定したい場合はここで

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

が作業DEMOであるように、あなたは、カルーセルのIDを指定することができます。

JSFiddle Demo