（css ）图片压盖效果的案例总结

（css ）图片压盖效果的案例总结

（初学前端，请多多指教）最近做静态页面，发现有很多图片压盖效果的布局。鼠标放上去的时候，显示下面的文字，鼠标松开，就会隐藏。

那么你们遇到这样的布局会怎么做呢？
一般会想到浮动和定位。

具体步骤

第一步，先设置几个div，放需要的图片，和要显示的文字。

第二步，使div浮动，令其横向排布。

第三步，使文字定位在div的下方（子绝父相<也就是儿子设置绝对定位，父亲设置绝对定位>）

第四步，设置隐藏

接下来看看具体代码吧

这里是css的代码

        * {
   
            margin: 0;
            padding: 0;
        }

        .center3 {
   
            width: 1400px;
            height: 579px;
            background-color: #ffffff;
            margin: 0 auto;

        }


        .center3 .center3-c {
   
            width: 1400px;
            height: 225px;
            justify-content: space-between;
        }

        .center3 .center3-c .center3-c1 {