圆形悬停效果缩放以将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>的{​​{1}}状态框阴影：

:hover

3。删除链接的包装div（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); ）上的上边距，并添加以下样式：

.Col

我截取了结果的截图：