CSS实现图片文字排版02

实现思路

使用: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实现图片文字排版02相关推荐

竖向图片插入_Word小技巧：让你的图片文字排版更有创意
想在头条中发表文章或者写论文,插入的图片太单调?今天小编就简单跟大家分享几个小技巧,图片搭配文字让你的版面更有可读性. 第一种:最简单的横向文字排版具体做法:在word中插入图片后,插入一个文本框后 ...
该怎么图片转文字？怎么高效提取图片文字呢？
图片已然成为我们传递信息的主要载体,在与他人的沟通中充当着较为重要的角色,而当大家想对图片中的文字内容进行提取时,除了采取传统的手动码字输出,还有什么方法呢? 其实,大家还能够使用可以图片转文字的软件 ...
CSS浮动+背景图片+边框+文字排版+段落设置
一.CSS浮动 1.简介默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动浮动意 ...
css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...
【前端第四课】CSS值和单位；CSS文字排版；CSS变换，过渡，动画；CSS定位
目标了解掌握CSS值和单位了解掌握CSS文字排版了解掌握CSS变换,过渡,动画了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...

CSS实现图片文字排版02

实现思路

HTML代码

CSS代码

CSS实现图片文字排版02相关推荐

最新文章

热门文章