画像のホバー効果がコンテナの外側に広がる

Question

私は現在、「グレースケールを色付け」し、「ズーム」エフェクトを適用した画像のグリッドを持っています。ズームエフェクトはコンテナの外に拡大しています。 overflow: hidden（数回）を適用し、max-widthを設定しました。しかしながら、これらの試みは成功していない。ここに私のJSFiddleがあります。

HTML

<div class="content"> 
    <ul class="rows"> 
    <li> 
     <a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a> 
    </li> 
    <li> 
     <a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a> 
    </li> 
    <li> 
     <a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a> 
    </li> 
    <li> 
     <a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style=" float:left"></a> 
    </li> 
    <li> 
     <a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a> 
    </li> 
    <li> 
     <a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a> 
    </li> 
    </ul> 
</div> 

CSS

.content { 
    width: 100%; 
    height: auto; 
    min-height: 100%; 
} 

.rows { 
    list-style: none; 
    overflow: hidden; 
    width: 100%; 
} 

.rows li a img { 
    max-width: 100%; 
    overflow: hidden; 
} 

.rows a img { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
    -webkit-filter: grayscale(100%) opacity(0.7); 
    filter: grayscale(100%) opacity(0.7); 
} 

.rows a img:hover { 
    -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
    -webkit-filter: grayscale(0) opacity(1); 
    filter: grayscale(0) opacity(1); 
    -webkit-transition: .3s ease-in-out; 
    transition: .3s ease-in-out; 
} 

Answer 1

画像のコンテナはaタグであるので、あなたは、この要素にoverflow: hiddenを設定する必要があります。

.rows li a { 
    float: left; 
    width: 50%; 
    overflow: hidden; 
} 

あなたのCSSに上記のコードを追加して、すべての画像の幅を100%に設定してください：

<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="100%" height="auto" style="float:left"></a>