Tạo hiệu ứng hover image và set video background cho testimonials section

// components/_testimonials.scss
&:hover &__caption{
        opacity: 1;
        transform: translate(-50%,-50%);

    }
1
2
3
4
5
6
7

&:hover &__img{
        transform: scale(1.05);
        filter: blur(.5rem) brightness(70%);
    }
1
2
3
4
5

    &__img{
        transition: all .3s; 
    }

    &__caption{
        transition: all .5s;
    }
1
2
3
4
5
6
7
8

<section class="section-testimonials">
            <!--add this--><div class="bg-video">
                <!--add this--><video class="bg-video__content" autoplay muted loop>
                <!--add this-->    <source src="img/Boulevard.mp4" type="video/mp4">
                <!--add this-->    <source src="img/Boulevard.webm" type="video/webm">
                <!--add this-->   Your browser is not supported
                <!--add this--></video>
            <!--add this--></div>
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    testimonials
                </h2>
            </div>
            <div class="row">
                <div class="testimonial">
                    <figure class="testimonial__shape">
                        <img src="./img/person1.jpg" class="testimonial__img" alt="photo1">
                        <figcaption class="testimonial__caption">
                            Lionel Meshi
                        </figcaption>
                    </figure>
                    <div class="testimonial__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            thank for your guide
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        </p>
                    </div>
                </div>
                <div class="testimonial">
                    <figure class="testimonial__shape">
                        <img src="./img/person2.jpg" class="testimonial__img" alt="photo2">
                        <figcaption class="testimonial__caption">
                            Hellarri Cshinson
                        </figcaption>
                    </figure>
                    <div class="testimonial__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            very helpful course
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="u-center-text u-margin-top-big u-margin-bottom-big">
                <a href="#" class="btn-text">read all the testimonials &rarr;</a>
            </div>
        </section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

// main.scss
@import './components/bg-video';
1
2
3

.bg-video{
    
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .2;
}
1
2
3
4
5
6
7
8
9
10

&__content{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
1
2
3
4
5
6

// components/_bg-video.scss
.bg-video{
    
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .2;
    overflow: hidden;

    &__content{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18