Phóng to hình ảnh trong Xenforo bằng CSS3

[PVS]

Css3 là 1 công cụ tuyệt vời nhưng mình thấy nó vẫn chưa được áp dụng nhiều và khai thác cho website.
Hôm nay mình hướng dẫn các bạn 1 thủ thuật rất đơn giản nhưng lại khá hay và dễ dàng, chắc chưa ai nghĩ ra.

Mở template bb_code_base.css tìm

.bbCodeImage{
z-index: 10;
max-width:100%
}

Thêm vào dưới đoạn code sau:

.bbCodeImage{
-webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.2s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.2s; /*Mozilla duration version*/ -o-transition-duration: 0.2s; /*Opera duration version*/ opacity: 1; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/
}
.bbCodeImage:hover{
position: relative; z-index: 50000;
-webkit-transform:scale(1.3); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; -webkit-box-shadow: 0px 0px 30px gray; -moz-box-shadow: 0px 0px 30px gray; -khtml-box-shadow: 0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1;
}

Các bạn test thử nhé, chỉ cần rê chuột vào 1 hình ảnh bất kỳ trong bài viết để xem kết quả nhé.

P/S: chú ý có 2 thông số bạn có thể tùy chỉnh

transform:scale(1); /* ảnh ở size mặc định*/
transition-duration: 0.2s; /*thời gian chuyển đổi hiệu ứng*/

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

Nguồn: azviet.asia​