css - 圆形悬停效果可缩放以将 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.用这个替换那个 child<div>的:hoverstate 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;

我截取了我的结果截图：