Sau một thời gian tiếp xúc và làm việc với CSS, mình muốn thử làm ra một hiệu ứng hover “xịn sò” nhất có thể với những kiến thức đã có. Vậy là sau vài giờ đồng hồ mầy mò kết hợp với một ít Jquery, đây là kết quả mình đạt được.

Các bạn có thể xem lại link đây.

Trong bài viết này mình sẽ hướng dẫn các bạn cách để làm được hiệu ứng như trên.

Phần 1. Chuẩn bị

Điều gì sẽ là “hot” cho lập trình Front-end ( CSS, HTML ) tại Mobifone Global, một công ty mang quy mô công nghệ toàn cầu?”]

Trước tiên, chúng ta tạo ra một element với class .card với tác dụng như một container chứa những element khác.

<div class=“card”>

<div class=“card__img-wrapper”><img class=“card__img” src=“”/></div>

<p class=“card__title”>Forest Road</p>

</div>

.card {

    margin: auto;

    position: relative;

}

.card__img–wrapper {

    border–radius: 15px;

    width: 300px;

    height: 450px;

    background: transparent;

    overflow: hidden;

}

.card__img {

    display: block;

    margin: –20% 0 0 –20%;

    width: 140%;

    height: 140%;

    object–fit: cover;

    backface–visible: hidden;

    vertical–align: middle;

}

.card__title {

    position: absolute;

    bottom: 0;

    color: #fff;

    padding: 5px;

    font–size: 30px;

    width: 100%;

    transition: all .3s ease;

    cursor: default;

    background: transparent;

    transition: all .3s ease;

}

$(function(){

    $(‘.card’).mousemove(function(ev){

        // Do something when mouse move

    });

    $(‘.card’).mouseleave(function(ev) {

        // Do something when mouse leave

    });

})

Trong sự kiện mousemove chúng ta sẽ tìm đến vị trí con trỏ chuột khi di chuột trong .card sau đó tính toán để áp dụng vào transform.

$(‘.card’).mousemove(function(ev){

    let parentWidth = $(this).width();  // Chiều rộng div cha

    let parentHeight = $(this).height();  // Chiều dài div cha

    let mouseX = ev.pageX – $(this).offset().left;  // Vị trí x chuột trong div cha

    let mouseY = ev.pageY – $(this).offset().top;  // Vị trí y chuột trong div cha

    let x = (parentWidth/2 – mouseX)/15;

    let y = –(parentHeight/2 – mouseY)/15;

    

    $(this).css({

      ‘transform’: ‘rotateX(‘+ y +‘deg) rotateY(‘+ 2*x +‘deg) translateZ(50px)’,

      ‘transition’: ‘all .15s ease’

    });

    

    $(this).find(‘.card__img’).css({

      ‘transform’: ‘scale(1.05) translateX(‘+ –5*x +‘px) translateY(‘+ –5*y +‘px)’,

      ‘transition’: ‘all .15s ease’

    });

});

$(‘.card’).mouseleave(function(ev) {

    $(this).css({

      ‘transform’: ‘rotateX(0) rotateY(0)’,

      ‘transition’: ‘all .6s ease’

    });

    $(this).find(‘.card__img’).css({

      ‘transform’: ‘scale(1) translateX(0px) translateY(0px) translateZ(0)’,

      ‘transition’: ‘all .6s ease’

    });

});