Hướng dẫn tạo khung hover có hình ảnh bằng CSS tuyệt đẹp

đã xuất bản

Hướng dẫn cách làm

Bạn tạo một Widget HTML mới và cho toàn bộ code sau vào và lưu lại :

<style>
.qc_sidebar{width:100%;overflow:hidden;position:relative}.qc_sidebar a{width:100%;height:150px}.qc_sidebar a:hover span{opacity:1;letter-spacing:0}.qc_sidebar img{width:100%;height:auto}.qc_sidebar span{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);font:500 14px Roboto;background:#fff;text-align:center;padding:10px;border-radius:10px;width:100%;text-transform:uppercase;opacity:0;letter-spacing:2px;transition:.3s}
</style>
<div class="qc_sidebar">
<a title="Facebook Parody - Responsive Template for Blogspot" href="https://www.bacsiwindows.com/2017/12/ban-theme-facebook-parody-responsive-template-for-blogspot.html" target="blank"><img src="https://1.bp.blogspot.com/-bRhTga3Wlcs/WkmUQIA82RI/AAAAAAAAAoA/8ISgYnan5FUEBJZJQwJvmcrvdgv5j8y1QCLcBGAs/s300/Facebook_Parody_theme-for-Blogspot---------Designed-by-Bac-Si-Windows-com.png"><span>Theme Cực Đẹp giá Cực Mềm!</span></a>
</div>
DEMO ở trang chủ nhé !!! 
Bài viết cùng chuyên mục

0 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

Gợi ý cho bạn