在悬停在隐藏父项中的悬停上显示缩放效果

当我将鼠标悬停在每个元素上时，我使用内容滑块（缩略图滑块），我想缩放它（使其更大），并且通过父项的隐藏溢出防止缩放，基本上它是这样的在悬停在隐藏父项中的悬停上显示缩放效果

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

这里是滑块本身

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

来源

2016-07-26 Nadeem Khedr

您应该删除overflow：hidden。溢流容器无法达到这样的效果。 – 3rdthemagical

@滑盖本身需要隐藏第三个外形的溢出来隐藏溢出的幻灯片 –

我对你有坏消息。 – 3rdthemagical

的codepen如果我的理解是正确的，你想缩放后的子元素会比父母更大。如果是这样的情况下，这里是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); 
}

来源

2016-07-26 09:06:19 Tezekiel

但是父级已溢出：隐藏。 – 3rdthemagical

编辑我的回答 – Tezekiel

好的。尝试添加一些孩子。要将绝对位置设置为小孩，您必须添加相对于父项的位置。而这段代码不起作用。在容器外面显示溢出的东西是不可能的：隐藏的。 – 3rdthemagical

请通过下方码。

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

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

希望你喜欢它。

来源

2016-07-26 09:31:41

我想img扩展到容器外部 –

那么你只能删除溢出：从类.item隐藏 –

在悬停在隐藏父项中的悬停上显示缩放效果

回答

相关问题