10

ズームインが div 内の img のみに影響し、すべての div スケールのサイズを変更しないようにしたい

ここにフィドルリンクがあります： http://jsfiddle.net/4tHWg/1/

コード例:

.box {
   float: left;
   position: relative;
   width: 14.285714286%;



}

.boxInner img {
   width: 100%;
   display: block;
   -webkit-filter: grayscale(00%);
   -moz-filter: grayscale(00%);
   -o-filter: grayscale(00%);
   -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;

}

.boxInner img:hover {
  width: 200%;
}
4

2 に答える 2

1

Hugo の回答に加えて、これを親要素に追加する必要があります。

.boxInner {
    overflow: hidden;
}

.boxInner img:hover {      
   -webkit-transform: scale(1.4);
   -moz-transform: scale(1.4);
   -ms-transform: scale(1.4);
   -o-transform: scale(1.4);
   transform: scale(1.4);    
}

この方法では、div は子イメージと一緒にサイズ変更されません。

于 2014-06-12T08:34:21.763 に答える