3カラムで画像を並べています。
マウスオーバーした時に「transform: scale()」の値を変えて
画像を拡大させる処理にしたいです。
現状、どの画像をマウスオーバーしても
全ての画像が一度に拡大してしまいます。
マウスオーバーした画像のみだけ拡大させるためには,
jqueryもしくはjavascriptで
どのよな処理を付け加えれば実現可能でしょうか。
HTML
1<div class="main_link"> 2<div class="container clearfix"> 3<a href="#"> 4<div class="thumb"><img src="sample.jpg" alt="" width="316" height="195"></div> 5</a> 6<a href="#"> 7<div class="thumb"><img src="sample.jpg" alt="" width="316" height="195"></div> 8</a> 9<a href="#"> 10<div class="thumb"><img src="sample.jpg" alt="" width="316" height="195"></div> 11</a> 12</div> 13</div>
CSS
1.main_link { 2 width: 950px; 3 margin: 0 auto; 4} 5.main_link .container a { 6 display: inline-block; 7 float: left; 8} 9.main_link a .thumb { 10 overflow: hidden; 11} 12.clearfix:after { display: block; clear: both; content: ''; }
js
1$('.main_link a').hover( 2 function(){ 3 $('.main_link a .thumb img').css({ 'transform': 'scale(1.2)'}); 4 },function(){ 5 $('.main_link a .thumb img').css({ 'transform': 'scale(1)'}); 6 } 7); 8
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/14 13:13 編集