CSS图片文字排版01-蒲公英云

CSS图片文字排版01

实现思路

通过clip-path属性剪切不同时刻图片大小，开始，给h2，p，a标签影藏并使用transform: translateY()属性，设置不同的偏移量，通过:hover选择器，当鼠标划入的时候，缩小图片大小，将transform: translateY()偏移量设置为0；通过transition设置过渡时间来实现动画效果。
实现效果
在这里插入图片描述

HTML代码

<div class="content-top">
    <div class="header">
        <h3>北海风景</h3>
        <p class="header-info">这些年我们一起看过的风景</p>
    </div>
    <div class="room">
        <div class="box">
            <div class="imgBx">
                <img src="img/guantouling2.png" />
            </div>
            <div class="content">
                <h2>冠头岭</h2>
                <p>
                记不起第一次和谁相遇在夕阳下的冠头岭，只记得那时的夕阳和大海的微风轻轻吹在脸上，、那感觉仿佛此刻连空气都是甜的
                </p>
                <a href="index_foodview.html#gtl">Read More</a>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="img/qiaogang2.png" />
            </div>
            <div class="content">
                <h2>桥港风情街</h2>
                <p>
                    记不起，第一次和谁相约在别有风味的桥港风情街，只记得那一刻，走进糖水店将糖水慢慢吸入嘴里的那刻，
                    味蕾的微微触动，仿佛世界都是甜甜的感觉
                </p>
                <a href="index_foodview.html#qg">Read More</a>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="img/view5.png" />
            </div>
            <div class="content">
                <h2>海滩公园</h2>
                <p>
                    记不起，第一次何时来到海滩公园，只记得那时三五好友，并肩靠在海栏处，看着大家玩沙戏水，微风吹到脸庞，
                    仿佛是大自然的触动，那感觉微微入醉
                </p>
                <a href="index_foodview.html#htgy">Read More</a>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="img/laojie2.png" />
            </div>
            <div class="content">
                <h2>老街</h2>
                <p>
                 还记得，那个暑假第一次来到北海，这个充满好奇的神秘地方，来校和舍友去的北海第一个景点就是北海老街，老式的建筑，
                 别有风味的地板，仿佛把自己带到了解放初期。
                </p>
                <a href="index_foodview.html#lj">Read More</a>
            </div>
        </div>
    </div>
</div>

CSS代码

<style type="text/css"> .content-top{ 
                font-family:"微软雅黑";
                width:100%;
                height: auto;
            }
            .header{ 
                width: 100%;
                height: 100px;
                border-bottom:3px solid red;/*标题下划线*/
                text-align: center;
                font-size:32px;
                line-height: 30px;
            }
            .header-info{ 
                color:gray;
                font-size:20px;
                margin-top:-20px;
            }
            /*图片*/
            .room{ 
                position: relative;
                width: 100%;
                height:auto;
                display: flex;/*弹性布局，直接子元素排成一行*/
                flex-wrap: wrap;/*超出自动换行*/
                justify-content: space-around;/*周围留白*/
                /* border:2px solid red; */
            }
            .room .box{ 
                position: relative;
                width: 300px;
                height: 400px;
                margin: 20px 0;
                box-sizing: border-box;/*padding和border的值就不会在影响元素的宽高*/
                overflow: hidden;/*超出隐藏*/
            }
            .room .box .imgBx{ 
                position: absolute;
                top:0;
                left: -20px;
                width: 100%;
                height: 100%;
                background-color: #000;
                clip-path: circle(400px at center 100px);/*在图片中心截取400px大小的圆*/
                transition: 0.5s;/*0.5s过渡*/
                transition-delay: 0.5s;/*延迟0.5s*/
            }
            .room .box:hover .imgBx{ 
                clip-path: circle(80px at center 100px);/*在图片中心窃取一个80px大小的圆*/
                transition-delay: 0s;
            }
            .room .box:hover .imgBx img{ 
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 80%;
                object-fit: cover;/*保持图片原有尺寸比例*/
            }
            .room .box .content{ 
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 55%;
                padding: 20px;
                box-sizing: border-box;
                text-align: center;
            }
            .room .box .content h2{ 
                margin: 0;
                padding: 0;
            }
            .room .box .content a{ 
                text-decoration: none;
                background: #000;
                color: #fff;
                padding: 5px;
                display: inline-block;
            }
            .room .box .content h2, .room .box .content a{ 
                opacity: 0;/*影藏*/
                transition: 0.5s;
                transform: translateY(20px);/*位置在Y轴偏移20px*/
            }
            .room .box .content p{ 
                text-indent: 2em;/*首行缩进字体2倍*/
                opacity: 0;
                transition: 0.5s;
                transform: translateY(20px);
            }
            .room .box:hover .content h2{ 
                opacity: 1;
                transform: translateY(0px);
                transition-delay: 0.5s;
            }
            .room .box:hover .content p{ 
                opacity: 1;
                transform: translateY(0px);
                transition-delay: 0.7s;/*延迟0.7s*/
            }
            .room .box:hover .content a{ 
                opacity: 1;
                transform: translateY(0px);
                transition-delay: 0.9s;
            }
        </style>