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

css图片和文字排版_图片提取文字「建议收藏」实现思路使用:hover选择器,当鼠标划入时,transform:scale(1.20);将图片放大1.2倍,再改变文字的外边距,达到动态效果

实现思路

使用: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图片和文字排版_图片提取文字「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/69109.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注