css图片和文字排版_图片提取文字「建议收藏」

实现思路

使用:hover选择器，当鼠标划入时，transform: scale(1.20);将图片放大1.2倍，再改变文字的外边距，达到动态效果。
实现效果

HTML代码

		<div class="food_display">
			<!-- 蟹仔粉介绍 -->
			<div class="box3">
				<div class="food_img">
					<img src="img/index_food/food_img1.png" >
				</div>
				<div class="food_text" id="xzf">
					<p>2020-6-15</p>
					<hr style="width:30px;margin-left: 0px;">
					<h3>蟹仔粉</h3>
					<p class="suojin">北海名小吃——蟹仔粉，将螃蟹打碎，然后放入锅里熬制高汤。吃的时候将米粉在蟹汤里煮，
					 再放入青菜、肉末等配菜，整碗粉就得一个鲜字。</p>
				</div>
				<div class="food_more">
					<p><a href="https://zhidao.baidu.com/question/1953715012224954388.html" target="_blank">
					&nbsp;ReadMore
					</a></p>
				</div>
			</div>
			<div class="box3" id="xzd">
			<div class="food_img">
				<img src="img/index_food/food_img2.png" >
			</div>
			<div class="food_text">
				<p>2020-6-15</p>
				<hr style="width:30px;margin-left: 0px;">
				<h3>花雕花蟹蒸水蛋</h3>
				<p class="suojin">花雕花蟹蒸水蛋，是一道北海特色美食，蟹与鸡蛋的完美碰撞味道鲜美，
				使人喜欢有加，制作简单，是道不得不尝的美食，你心动了吗？</p>
			</div>
			<div class="food_more">
				<p><a href="http://www.xiachufang.com/recipe/100516476/" target="_blank">
				&nbsp;ReadMore
				</a></p>
			</div>
		</div>
		
		<div class="box3" id="sydx">
			<div class="food_img">
				<img src="img/index_food/food_img3.png" >
			</div>
			<div class="food_text">
				<p>2020-6-15</p>
				<hr style="width:30px;margin-left: 0px;">
				<h3>椒盐弹虾</h3>
				<p class="suojin">椒盐弹虾，是北海的特色美食。濑尿虾，又称“爬虾”。 用姜酒盐先腌，然后再放到油锅里炸，
				出锅后就是一道肉鲜皮酥的“椒盐弹虾”了，味道香而脆口，是道让人难忘的美食</p>
			</div>
			<div class="food_more">
				<p><a href="https://www.meishij.net/techan/jiaoyandanxia.html" target="_blank">
				&nbsp;ReadMore
				</a></p>
			</div>
		</div>
		<div class="box3" id="tlyj">
			<div class="food_img">
				<img src="img/index_food/food_img4.png" >
			</div>
			<div class="food_text">
				<p >2020-6-15</p>
				<hr style="width:30px;margin-left: 0px;">
				<h3>田螺鸭脚煲</h3>
				<p class="suojin">田螺鸭脚煲，是广西北海的名菜,以其田螺或当地的石螺的鲜香,
				搭配炸过的鸭脚炖煮,而得到独特的鲜香味道而深受广大吃货的喜爱。</p>
			</div>
			<div class="food_more">
				<p><a href="http://www.360doc.com/content/19/0306/08/52553203_819538498.shtml" target="_blank">
				&nbsp;ReadMore
				</a></p>
			</div>
		</div>
		<div class="box3" id="xwjpt">
			<div class="food_img">
				<img src="img/index_food/food_img5.png" >
			</div>
			<div class="food_text">
				<p>2020-6-15</p>
				<hr style="width:30px;margin-left: 0px;">
				<h3>虾丸鸡皮汤</h3>
				<p class="suojin">鸡皮虾丸汤，虾肉嫩白色，是海中之宝，高蛋白低脂肪，可补肾壮阳，健脾化痰，益气通乳。用其做汤口味清鲜，
				虾肉柔滑软嫩。特别是丸子做成白、绿两色，颇有特色</p>
			</div>
			<div class="food_more">
				<p><a href="http://www.xiachufang.com/recipe/158886/" target="_blank">
				&nbsp;ReadMore
				</a></p>
			</div>
		</div>

		</div>

CSS代码

/*美食样式*/
.food_display{
	width: 1200PX;
	height:auto;
	background-color:white;
	margin: 0px auto;
}
.box3{
	width:1100px;
	height: 240px;
	/* border:2px solid blue; */
	display: flex;
	margin-top: 30px;
	margin-left:50px;
	padding-top: 30px;
	padding-left: 20px;
}
.box3 .food_img{
	width:260px;
	height:200px;
	/* background-color: #0000FF; */
	
}
.box3 .food_text{
	width:60%;
	height:200px;
	color:#888888;
	margin-left: 30px;
	font-size: 18px;
	/* border:2px solid red; */
}
.suojin{
	text-indent: 2em;
}
.box3 .food_text h3{
	font-weight: normal;
	color: black;
}
.box3 .food_more{
	width:150px;
	height:200px;
	border: #00FFFF;
}
.box3 .food_more p{
	opacity: 0;
	width:110px;
	font-size: 25px;
	color: black;
	font-weight: bold;
	border-left: 3px solid black;
	margin-top:80px;
	
}
.box3 .food_more p a{
	text-decoration: none;
	color: #000000;
	
}
.box3:hover .food_img{
	transition: 0.5s;
	/* margin-left:20px; */
	transform: scale(1.20);
	/* transform: translateX(20px); */
	
}
.box3:hover .food_text{
	transition: 0.8s;
	margin-left:40px;
}
.box3:hover .food_more p{
	opacity:1;
	transition: 1s;
	margin-left: 15px;
}

今天的文章css图片和文字排版_图片提取文字「建议收藏」分享到此就结束了，感谢您的阅读。