之前的文章《》中,給大家介紹了怎麼使用css製作表格邊框設定效果。下面本篇文章給大家介紹如何用css製作圖片文字排版的方法,我們一起看看怎麼做。
網頁中常常有這樣的CSS圖片文字排版,給大家分享一下看效果圖看完效果,我們來研究一下是怎麼實現呢,給大家用於講解html+css圖片文字排版的基本流程。
主要使用CSS屬性visibility: hidden;
將p
標籤文字隱藏起來,再通過hover
選擇器來改變類card
的高度,將p
標籤文字visibility: visible;
顯示出來。
1、首先html建立新檔案,定義3個div
標籤。
<body> <div class="container"> <div class="card"> <div class="img"> <img src="54545454.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="54545454.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="54545454.jpg" > </div> <div class="top-text"> <div class="name"> 團日活動 </div> </div> <div class="bottom-text"> <div class="text"> 還記得,大二下學期,大家為了完成輔導員下發了「最美北海」我為北海做的那些事志願活動, 我們大家來到北海美麗的海灘公園,齊心志願動手去撿垃圾,保護海灘,大家人認真撿著垃圾, 看到旁邊的人舉起大拇指,感覺此刻值了。 </div> </div> </div> </div> </body>
2、div
盒子的class
設定為container
,可以避免浮動佈局時出現的底部對不齊情況。
3、給container
新增樣式設定:display: flex
彈性佈局;align-items: center
縱軸方向居中對齊;justify-content: left
軸方向左對齊即可。
<style type="text/css"> .container{ width: 100%; height: 500px; padding: 0px 40px; display: flex; align-items: center; justify-content: left; }
程式碼效果
4、給card
新增樣式設定:transition
屬性滑鼠懸停;box-shadow
設定陰影效果;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
選擇器選擇滑鼠移樣式。
.card:hover{ height:400px; box-shadow:5px 5px 10px rgba(0,0,0,0.2); }
6、使用img
標籤處理圖片尺寸寬度和高度,object-fit: cover
切割圖片,保留圖片原比例大小。
.card .img{ height: 200px; width: 100%; } .card .img img{ height: 100%; width: 100%; object-fit: cover; }
7、visibility: hidden;
將p
標籤文字隱藏起來新增transition
屬性滑鼠懸停。
.card .bottom-text{ text-indent: 2em; padding: 0 20px 10px 20px; margin-top: 5px; background-color: white; visibility: hidden; transition: 0.5s;
8、hover
選擇器來改變類card
的高度,將p
標籤文字visibility: visible;
顯示出來。
.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"> 第一次班級聚會 </div> </div> <div class="bottom-text"> <div class="text"> 還記的,2018年,大一下學期,開學我們第一次班級聚會,相聚在北海園博園假山, 一起動手、齊力快樂的一起燒烤,雖然天色黑的伸手不見五指,讓人害怕,但我們相聚在一起, 有說有笑,彼此相知,卻一點感覺不到害怕,那刻,彷彿時間停住了,只剩下快樂相伴。 </div> </div> </div> <!-- two --> <div class="card"> <div class="img"> <img src="54545454.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="54545454.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製作圖片文字排版(程式碼分享)的詳細內容,更多請關注TW511.COM其它相關文章!