Fatal编程技术网
  • css/
  • Css 圆圈悬停效果缩放到填充div到100%

Css 圆圈悬停效果缩放到填充div到100%

css geometry

Css 圆圈悬停效果缩放到填充div到100%,css,hover,transition,geometry,Css,Hover,Transition,Geometry,希望有人能帮我做这个 这是我的地址： 正如你将能够看到它的响应与一切，除了品牌闪光的新圆圈悬停效果。它只是没有像其他元素那样缩放以适应它所在div的宽度和高度 我在这里找到了圆形悬停效果的教程： 基本上，我如何使它的规模，以适应，然后减少下来时，在一个较小的浏览器大小 非常感谢您的帮助：） Col1。从元素中删除高度，并将以下样式添加到该元素： width: 100%; padding-bottom: 100%; position: relative; 2.将这些样式添加到该元素的子元素

希望有人能帮我做这个

这是我的地址：

正如你将能够看到它的响应与一切，除了品牌闪光的新圆圈悬停效果。它只是没有像其他元素那样缩放以适应它所在div的宽度和高度

我在这里找到了圆形悬停效果的教程：

基本上，我如何使它的规模，以适应，然后减少下来时，在一个较小的浏览器大小

非常感谢您的帮助：）

Col

1。从
  • 元素中删除高度，并将以下样式添加到该元素：
    

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

    

    
2.将这些样式添加到该
    • 元素的子元素
    ：
    

    
4.替换该子
    的
    ：将
    状态框阴影悬停在以下位置：
    

    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;

    

    
我拍摄了一张结果截图：
    

    请发布一篇有关资源的文章。

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