Question

当我悬停在每个元素上时，我正在使用内容滑块（缩略图滑块），我想缩放它（使其更大）并且通过隐藏父级的溢出来防止缩放，基本上就是这样的

.parent {
  overflow hidden
}
.child:hover {
  transform: scale(1.2);
}

这是滑块本身的代码笔

http://codepen.io/nadeemkhedr/pen/OXkKxa?editors=1100

Answer 1

如果我理解正确，你希望你的子元素在缩放后比父元素大。如果是这种情况，那么JSfidlle就是解决方案：

https://jsfiddle.net/7vd6fhfo/3/

代码：

HTML

<div class="parent">
  <div class="child">

  </div>
</div>

CSS

.parent{
  width:200px;
  height:200px;
  background-color:green;
  overflow:hidden;
}
.child{
  width:190px;
  height:190px;
  background-color:red;
  position:absolute;
}
.child:hover{ 
  transform: scale(1.2);
}

Answer 2

请仔细阅读以下代码。

＆＃13;

.item { float:left; position: relative; border: 1px solid #333; 
  overflow: hidden; width: 350px;}
.item img {width: 100%; display:table-cell;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

＆＃13;

<div class="item">
  <img src="http://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="image" width="100%" >
</div>

＆＃13;

希望你喜欢它。

在溢出隐藏的父级内显示缩放效果

2 个答案: