圆形悬停效果可缩放以将 div 填充到 100%

Question

希望有人能帮我解决这个问题..？

这是我的开发网站： http://colinmorley.com/stuck/index2new.html

您将能够看到它对所有内容的响应，除了全新的圆形悬停效果。它只是不像其他元素那样缩放以适应它所在的 div 的宽度和高度。

我在这里找到了圆形悬停效果的教程： http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

基本上我如何使其缩放以适应，然后在较小的浏览器尺寸时缩小？？？

如果您能提供帮助，非常感谢:)

颜色

Answer 1

1. 移除 <li> 元素的高度，并将这些样式添加到该元素：

width: 100%;
padding-bottom: 100%;
position: relative;

2. 将这些样式添加到 <li> 元素的子元素 <div>：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

4. 将子 <div> 的 :hover state box-shadow 替换为：

box-shadow: inset 0 0 0 200px rgba(0,0,0, 0.6), inset 0 0 0 0px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1);

3. 删除链接包装 div (.Col) 的上边距，并添加以下样式：

position: absolute;
width: 100%;
top: 50%;
margin-top: -12px;

我截取了我的结果：