溢出：隐藏与边界半径和CSS变换忽略（仅限webkit）

我想在圆内有一个方形图像。溢出：隐藏与边界半径和CSS变换忽略（仅限webkit）

当用户将鼠标悬停在图像上时，图像应该缩放（放大）。

圆圈应保持相同的大小。

只有在CSS过渡期间，方形图像与圆形重叠（就像溢出：隐藏根本不存在）。

下面是在Chrome和Safari中的怪异的行为演示： http://codepen.io/jshawl/full/flbau

在Firefox中工作正常。

来源

2013-06-01 jessh

你是唯一一个我见过的人问这个... kuddos – carinlynchin

我删除了一些多余的标记（圆圈和方形容器......只需要一个）和风格的IMG本身：

#wrapper { 
 
    width: 500px; 
 
    height: 500px; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); 
 
} 
 

 
#test { 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 2s linear; 
 
} 
 

 
#test:hover { 
 
    transform: scale(1.2); 
 
}

<div id="wrapper"> 
 
    <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test"> 
 
</div>

来源

2013-06-01 23:40:02

这个圈子应该保持相同的尺寸 – jessh

看到我的编辑，在jsfiddle中工作就好了Chro我 –

不要过度complecate它这是答案的立场：亲戚; z-index：1; –

看来好像你是一个造型太很多元素！我创建了一个fork here

我编辑你的一些SASS代码，利用指南针库，并更好地利用transition和transform特性可以在这里看到：

body { padding: 3em; } 

.circle { 
    height: 500px; 
    width: 500px; 
    border: 1px solid black; 
    @include border-radius(500px); 
    overflow: hidden; 
} 

.circle img { 
    height: 500px; 
    width: 500px; 
    @include transition(all 0.3s ease); 
    &:hover { @include transform(scale(1.1)); } 
}

希望这有助于！请将circle元素视为具有关于空间的一般信息（例如，宽度为500px，高度为500px）的父容器。图像本身有一个圆形边框500px。这是你想编辑的元素！您可以在这里缩放和转换此元素，而无需与父容器circle进行交互。有关使用库的更多信息，请参考compass！祝你好运！

来源

2013-06-01 23:54:35 djthoms

奇怪的是，添加溢出：隐藏到图像的作品。它不应该在父母身上吗？ – jessh

找出最好的方法是尝试！从'.circle img'中删除'overflow'属性，并将其放在'.circle'中并查看结果。你甚至需要“溢出”属性？ – djthoms

哦，等待我刚才意识到你的叉子让圆圈变大了。圆应该保持相同的大小。图像应该变大 – jessh

您需要将此代码添加到您的IMG的父：

position:relative; 
z-index:1;

这里举例：http://codepen.io/DavidN/pen/dIzJK

来源

2014-10-14 10:13:16

我已经拥有了'position：relative'，但是增加了'z-index：1'来修复它。谢谢！ –

感谢David，这让我感到很多年。 –

是的，这个解决方案对我来说是一种享受。我没有使用圆圈，所以不想使用面具。似乎现在看起来很明显。 – alxrb

将此代码添加到您的父母股利和解决的问题：

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0);

来源

2015-10-07 08:29:35

请您详细说明您的答案，并增加关于您提供的解决方案的更多描述？ – abarisone

溢出：隐藏与边界半径和CSS变换忽略（仅限webkit）

回答

相关问题