CSS实现图片文字排版02

Dear 丶 2022-11-27 12:15 267阅读 0赞

## 实现思路 ##

使用:hover选择器，当鼠标划入时，transform: scale(1.20);将图片放大1.2倍，再改变文字的外边距，达到动态效果。  
**实现效果**  
![在这里插入图片描述][20200815153804944.gif_pic_center]

## 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">
    					 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">
    				 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">
    				 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">
    				 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">
    				 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;
    }

[20200815153804944.gif_pic_center]: /images/20221124/0943c24927e24b0a9a1e70d9548a9dce.png