文字排版03"/>
CSS图片文字排版03
实现思路
主要技术主要使用CSS属性visibility: hidden;将p标签文字隐藏起来,再通过:hover选择器来改变类card的高度,将p标签文字visibility: visible;显示出来。为了更好理解,没有将CSS和HTML分离,需要的话,请自行copy分离,备注挺详细的,需要可以参考一下。
实现效果
实现代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS图片文字排版03</title><style type="text/css">.container{width: 100%;height: 500px;padding: 0px 40px;display: flex;/*弹性布局*/align-items: center;/*纵轴方向居中对齐*/justify-content: left;/*X轴方向左对齐*/}.card{height: 270px;max-width: 350px;margin: 0px 20px;background-color: white;transition: 0.4s;box-shadow: 2px 2px 5px rgba(0,0,0,0.2);/*设置阴影效果*/}.card:hover{height:400px;box-shadow:5px 5px 10px rgba(0,0,0,0.2);}.card .img{height: 200px;width: 100%;}.card .img img{height: 100%;width: 100%;object-fit: cover;/*切割图片,保留图片原比例大小*/}.card .top-text{padding-top: 5px;}.card .top-text .name{font-size: 25px;font-weight:600;color: #202020;}.card .top-text p{font-size: 20px;font-weight:600;/*字体粗细*/color: #e74c3c;line-height: 20px;}.card .bottom-text{text-indent: 2em;/*首行缩进*/padding: 0 20px 10px 20px;margin-top: 5px;background-color: white;visibility: hidden;transition: 0.5s;}.card:hover .bottom-text{opacity: 1;visibility: visible;}.card .bottom-text .text{text-align: justify;}</style></head><body><div class="container"><div class="card"><div class="img"><img src="img/class/class_one.jpg" ><!-- one --></div><div class="top-text"><div class="name">第一次班级聚会</div></div><div class="bottom-text"><div class="text">还记的,2018年,大一下学期,开学我们第一次班级聚会,相聚在北海园博园假山,一起动手、齐力快乐的一起烧烤,虽然天色黑的伸手不见五指,让人害怕,但我们相聚在一起,有说有笑,彼此相知,却一点感觉不到害怕,那刻,仿佛时间停住了,只剩下快乐相伴。</div></div></div><!-- two --><div class="card"><div class="img"><img src="img/class/class_two.jpg" ></div><div class="top-text"><div class="name">优秀班级评比</div><!-- <p>Apps Developer</p> --></div><div class="bottom-text"><div class="text">还记得,大二上学期,一次晚点名辅导员说,每个班级要拍出最美的班级照,参加最美班级的摄影评比,我们大家一起在群里齐思广议,每个人把自己觉得好的想法分享出来,争取拍几张最美的班级照,很想说,我们大家认真付出的样子真的帅呆了。</div></div></div><!-- three --><div class="card"><div class="img"><img src="img/class/class_four.jpg" ></div><div class="top-text"><div class="name">团日活动</div></div><div class="bottom-text"><div class="text">还记得,大二下学期,大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动,我们大家来到北海美丽的海滩公园,齐心志愿动手去捡垃圾,保护海滩,大家人认真捡着垃圾,看到旁边的人举起大拇指,感觉此刻值了。</div></div></div></div></body>
</html>
更多推荐
CSS图片文字排版03
发布评论