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>