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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizeeGeHrslqiC5b4P9HMdLt0dBWn5vG5QOqQuwHILKM2Qh4MNK4LNvy3Lx4ucKhWJ9fQD_9ZjidkOsI9sW2LwXxegVcaXW295uZDpieADZVJHGgzY9JMbX5bFf2_nJAWmGQW7ox2LHJq3m/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é !!!