站長(zhǎng)資訊網(wǎng)
之前的文章《手把手教你使用css制作表格邊框設(shè)置效果（附代碼）》中，給大家介紹了怎么使用css制作表格邊框設(shè)置效果。下面本篇文章給大家介紹如何用css制作圖片文字排版的方法，我們一起看看怎么做。
網(wǎng)頁(yè)中常常有這樣的CSS圖片文字排版，給大家分享一下看效果圖看完效果，我們來(lái)研究一下是怎么實(shí)現(xiàn)呢，給大家用于講解html+css圖片文字排版的基本流程。
主要使用CSS屬性visibility: hidden;將p標(biāo)簽文字隱藏起來(lái)，再通過(guò)hover選擇器來(lái)改變類(lèi)card的高度，將p標(biāo)簽文字visibility: visible;顯示出來(lái)。
1、首先html創(chuàng)建新文件，定義3個(gè)div標(biāo)簽。
<body> <div class="container"> <div class="card"> <div class="img"> <img src="54545454.jpg" > <!-- one --> </div> <div class="top-text"> <div class="name"> 第一次班級(jí)聚會(huì) </div> </div> <div class="bottom-text"> <div class="text"> 還記的，2018年，大一下學(xué)期，開(kāi)學(xué)我們第一次班級(jí)聚會(huì)，相聚在北海園博園假山， 一起動(dòng)手、齊力快樂(lè)的一起燒烤，雖然天色黑的伸手不見(jiàn)五指，讓人害怕，但我們相聚在一起， 有說(shuō)有笑，彼此相知，卻一點(diǎn)感覺(jué)不到害怕，那刻，仿佛時(shí)間停住了，只剩下快樂(lè)相伴。 </div> </div> </div> <!-- two --> <div class="card"> <div class="img"> <img src="54545454.jpg" > </div> <div class="top-text"> <div class="name"> 優(yōu)秀班級(jí)評(píng)比 </div> <!-- <p>Apps Developer</p> --> </div> <div class="bottom-text"> <div class="text"> 還記得，大二上學(xué)期，一次晚點(diǎn)名輔導(dǎo)員說(shuō)，每個(gè)班級(jí)要拍出最美的班級(jí)照， 參加最美班級(jí)的攝影評(píng)比，我們大家一起在群里齊思廣議，每個(gè)人把自己覺(jué)得好的想法分享出來(lái)， 爭(zhēng)取拍幾張最美的班級(jí)照，很想說(shuō)，我們大家認(rèn)真付出的樣子真的帥呆了。 </div> </div> </div> <!-- three --> <div class="card"> <div class="img"> <img src="54545454.jpg" > </div> <div class="top-text"> <div class="name"> 團(tuán)日活動(dòng) </div> </div> <div class="bottom-text"> <div class="text"> 還記得，大二下學(xué)期，大家為了完成輔導(dǎo)員下發(fā)了“最美北海”我為北海做的那些事志愿活動(dòng)， 我們大家來(lái)到北海美麗的海灘公園，齊心志愿動(dòng)手去撿垃圾，保護(hù)海灘，大家人認(rèn)真撿著垃圾， 看到旁邊的人舉起大拇指，感覺(jué)此刻值了。 </div> </div> </div> </div> </body>
2、div盒子的class設(shè)置為container，可以避免浮動(dòng)布局時(shí)出現(xiàn)的底部對(duì)不齊情況。
3、給container添加樣式設(shè)置：display: flex彈性布局；align-items: center縱軸方向居中對(duì)齊；justify-content: left軸方向左對(duì)齊即可。
<style type="text/css"> .container{ width: 100%; height: 500px; padding: 0px 40px; display: flex; align-items: center; justify-content: left; }
代碼效果
4、給card添加樣式設(shè)置：transition屬性鼠標(biāo)懸停；box-shadow設(shè)置陰影效果；background-color屬性元素的背景色。
.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); }
5、給hover選擇器選擇鼠標(biāo)移樣式。
.card:hover{ height:400px; box-shadow:5px 5px 10px rgba(0,0,0,0.2); }
6、使用img標(biāo)簽處理圖片尺寸寬度和高度，object-fit: cover切割圖片，保留圖片原比例大小。
.card .img{ height: 200px; width: 100%; } .card .img img{ height: 100%; width: 100%; object-fit: cover; }
7、visibility: hidden;將p標(biāo)簽文字隱藏起來(lái)添加transition屬性鼠標(biāo)懸停。
.card .bottom-text{ text-indent: 2em; padding: 0 20px 10px 20px; margin-top: 5px; background-color: white; visibility: hidden; transition: 0.5s;
8、hover選擇器來(lái)改變類(lèi)card的高度，將p標(biāo)簽文字visibility: visible;顯示出來(lái)。
.card:hover .bottom-text{ opacity: 1; visibility: visible;
ok，完成！！
完整代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS圖片文字排版</title> <style type="text/css"> .container{ width: 100%; height: 500px; padding: 0px 40px; display: flex; align-items: center; justify-content: left; } .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="54545454.jpg" > <!-- one --> </div> <div class="top-text"> <div class="name"> 第一次班級(jí)聚會(huì) </div> </div> <div class="bottom-text"> <div class="text"> 還記的，2018年，大一下學(xué)期，開(kāi)學(xué)我們第一次班級(jí)聚會(huì)，相聚在北海園博園假山， 一起動(dòng)手、齊力快樂(lè)的一起燒烤，雖然天色黑的伸手不見(jiàn)五指，讓人害怕，但我們相聚在一起， 有說(shuō)有笑，彼此相知，卻一點(diǎn)感覺(jué)不到害怕，那刻，仿佛時(shí)間停住了，只剩下快樂(lè)相伴。 </div> </div> </div> <!-- two --> <div class="card"> <div class="img"> <img src="54545454.jpg" > </div> <div class="top-text"> <div class="name"> 優(yōu)秀班級(jí)評(píng)比 </div> <!-- <p>Apps Developer</p> --> </div> <div class="bottom-text"> <div class="text"> 還記得，大二上學(xué)期，一次晚點(diǎn)名輔導(dǎo)員說(shuō)，每個(gè)班級(jí)要拍出最美的班級(jí)照， 參加最美班級(jí)的攝影評(píng)比，我們大家一起在群里齊思廣議，每個(gè)人把自己覺(jué)得好的想法分享出來(lái)， 爭(zhēng)取拍幾張最美的班級(jí)照，很想說(shuō)，我們大家認(rèn)真付出的樣子真的帥呆了。 </div> </div> </div> <!-- three --> <div class="card"> <div class="img"> <img src="54545454.jpg" > </div> <div class="top-text"> <div class="name"> 團(tuán)日活動(dòng) </div> </div> <div class="bottom-text"> <div class="text"> 還記得，大二下學(xué)期，大家為了完成輔導(dǎo)員下發(fā)了“最美北海”我為北海做的那些事志愿活動(dòng)， 我們大家來(lái)到北海美麗的海灘公園，齊心志愿動(dòng)手去撿垃圾，保護(hù)海灘，大家人認(rèn)真撿著垃圾， 看到旁邊的人舉起大拇指，感覺(jué)此刻值了。 </div> </div> </div> </div> </body> </html>
推薦學(xué)習(xí)：CSS視頻教程
