Hiển thị nội dung trong suốt trên thumbnail đơn giản và đẹp

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ tới các bạn 1 hiệu ứng đẹp nhưng vô cùng đơn giản. Đó là hiện đoạn text trong suốt trên thumbnail. Thủ thuật chỉ dùng CSS và HTML, không có Javascript nên không ảnh hưởng nhiều đến tốc độ tải trang.

Bước 1: Đăng nhập Blogger ==> Bố cục ==> Thêm tiện ích ==> HTML/Javascript
Bước 2: Dán đoạn code bên dưới vào khung HTML ==> Lưu

<style>
*{box-sizing:border-box;}.container{position:relative;max-width:800px;margin:0 auto;}.container img{vertical-align:middle;}.container .content{position:absolute;bottom:0;background:rgba(0,0,0,0.5);color:#f1f1f1;width:100%;padding:10px;}.content {opacity: 0.7;}
</style>
<div class="container">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXGdmOaAY-LYEKwhRTWNipF-dn2EH8AX2snFMXgdM0WBQaIR5b1_F32FJTm5EEStKXOyDZCPxroA7YeGusOkIkTUobselkeNPtkw0g6T4Gh3N2_GSslad4U2PsKvVqd0QMb3xFEHOZfM/s1600/Qu%25C3%25AD+%25C4%2590z+v%25C3%25A3i.jpg" alt="Thủ Thuật Blogspot, Nguyễn Ngọc Quí Đz" style="width:100%;">
<div class="content">
<h1>Tiêu đề</h1>
<p>Nội dung...</p>
</div></div>

Chỉnh sửa tùy ý:

Kích thước và màu nội dung: color:#f1f1f1;width:100% (sửa % và mã màu f1f1f1 theo ý bạn, xem mã màu Tại đây)
Kích thước ảnh: style="width:100%; (sửa % theo ý bạn)

Nguyễn Ngọc Quí Đz

Nội dung...

Chúc các bạn thành công !

Nguồn: W3schools

N

24

Chia sẻ

• Nhận liên kết

Nguyễn Phú Cường

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!