當你和你的愛人一起經歷了許多浪漫的時刻,你想要永久地保存這些美好的回憶。為了讓這些回憶更好地被保存和分享,你可以使用一個漂亮的CSS模板,來創建一個獨一無二的情侶相冊。
/* CSS模板 */ .album { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .album-item { width: 250px; height: 250px; margin: 10px; position: relative; overflow: hidden; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .album-item img { width: 100%; height: 100%; object-fit: cover; } .album-item:hover .album-text { top: 0; } .album-text { position: absolute; bottom: 0; left: 0; right: 0; top: -100%; background-color: rgba(0, 0, 0, 0.7); color: white; text-align: center; padding: 10px; transition: top 0.3s ease; } .album-text h3 { font-size: 24px; margin: 0; padding: 0 0 10px; } .album-text p { font-size: 14px; margin: 0; } @media only screen and (max-width: 768px) { .album-item { width: 100%; height: 200px; } } @media only screen and (max-width: 480px) { .album-text { font-size: 12px; } }
這個模板使用了CSS的flex布局來排列圖片。所有的相冊項都是250像素寬和高的正方形,并且有一個5像素的圓角邊框和淡淡的陰影效果。當鼠標懸停在相冊項上時,相冊項底部將出現一個黑色半透明的區域,里面有相冊項的標題和描述。
注意到代碼中的media queries嗎?這使得你的相冊在移動設備上也能夠正常顯示。在屏幕較小情況下,相冊項會占據整行,相冊文字會做一些調整。
將這個CSS模板應用到你的情侶相冊中,你可以用HTML來創建一個包含相冊項的div元素。每個相冊項都應該有一個img標簽,用來嵌入你的照片,以及一個包含標題和描述的相冊文本div。
總的來說,使用CSS模板來創建你和你的愛人之間的情侶相冊是一個有趣的方式來保存浪漫回憶。嘗試使用這個模板,并在評論中分享你的結果吧!
上一篇css層jquery
下一篇想讓文字浮在css