Hiệu ứng zoom background image khi hover chuột

0
159

Chào các bạn, hôm nay mình sẽ chia sẻ một thủ thuật nhỏ khá hay mà mình thấy hữu ích, đó là hiệu ứng zoom hình nền khi hover chuột qua, đây là loại hiệu ứng mà ta thường thấy ở các trang porfolio, khi hover chuột qua thì sẽ scale ảnh với 1 tỉ lệ nào đó + mờ background + title hiện ra (hoặc thông tin bất kì).

Hiệu ứng này thì có nhiều cách để làm:

  • sử dụng jQuery
  • sử dụng hình ảnh rồi định vị trí(position) cho nó được bao quanh bởi 1 thẻ bất kì.
  • dùng background image.

Thì mình sẽ chia sẻ cách thứ ba nhé, cực kì đơn giản. Bắt đầu nào:

HTML

Thẻ div với class parent bên ngoài sẽ dùng làm khung chứa, thẻ div class child bên trong là thẻ mà chúng sẽ set background image cho nó, các event hoverscale chúng ta sẽ cho tác động vào thẻ này.

CSS

Nhằm tạo thêm sự mượt mà của chuyển động thì chúng ta sẽ dùng css3 transition 0.5s. Khi hover qua ta transform scale nó đi 1 tỉ lệ bất kì, ở đây mình dùng 2.2 cho bạn thấy rõ hiệu ứng hoạt động như thế nào

Cuối cùng, nếu bạn muốn tạo một background mờ mờ khi hover qua thì đơn giản chúng ta sử dụng css pseudo giống như bên dưới

Hãy chắc chắn ẩn nó đi rồi khi hover qua mới cho nó ẩn nhé.
Đơn giản vậy thôi, hi vọng giúp ích được các bạn. Mã nguồn và demo ở dưới đây nhé

See the Pen Hover zoom background images by huy kon (@huykon225) on CodePen.26877

ĐỂ LẠI BÌNH LUẬN