Hiện nội dung khi rê chuột vào ảnh đơn giản mà đẹp

Blog mình nội dung chủ yếu vẫn là tâm tư tình cảm tuổi mới lớn hoặc những thông tin, tình hình trong nước và quốc tế vui vui, thú vị, top trending... Nhưng cảm xúc thì không phải lúc nào cũng có nên ở mục Thích Chia Sẻ này mình sẽ xen thêm cả 1 chút Thủ Thuật Blogspot để có bài này bài kia không blog mình nó mốc mất.

Mỗi ngày bạn học được 1 cái mới, dù đơn giản hay không cũng sẽ làm bạn vui. Hôm nay, 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 nội dung khi rê chuột vào ảnh. 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 đâu.

Live demo:

Tham gia Phú Cường Blogger Group

Cách thực hiện:

Bước 1: Truy cập Quản trị blog - Bố cục - Thêm tiện ích - HTML/Javascript.

Bước 2: Copy toàn bộ code sau vào khung nội dung:

<style>
.npcads{position:relative;margin:0 auto}
.npcads .contentads{position:absolute;bottom:-30px;background:rgba(0,0,0,.5);color:#f1f1f1;width:100%;padding:10px;left:0;visibility:hidden;opacity:0;transition:all .2s;z-index:2}
.npcads:hover .contentads{bottom:0;visibility:visible;opacity:1;z-index:2}
</style>
<div class='npcads'>
<a href='https://www.facebook.com/groups/phucuongblogger/' rel='nofollow' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0G9bd9Ly4PC13VSP6A64DEVNx9sXMajQaIzSZbmdG2_Hu680UXGkr8OBb14PqCbZluHtgo4lO_RO4JvbWfsVAQ4ryI2iAo_v8x20QODMnM3v8-8UH_povwOnzo8ROSfdCoGI6QhbFtHZ/s1600/wallhaven-45496813-min-min.jpg'/>
</a>
<div class='contentads'>Tham gia Phú Cường Blogger Group</div>
</div>

- Sửa lại link ảnh và nội dung hiển thị phù hợp với blog bạn.

Bước 3: Lưu tiện ích.

Kết luận:

Vậy là mình vừa hướng dẫn xong cho các bạn 1 thủ thuật nho nhỏ giúp blog bạn thêm sinh động hơn. Bạn có thể dùng hiệu ứng này vào nhiều mục đích không chỉ riêng mục tiện ích đâu nhé. Có thể làm cho thumbnail mỗi bài viết, từng hình ảnh trong bài, banner... cái này tùy thuộc vào sự sáng tạo của bạn nha. Chúc các bạn thành công!