dyJEjLY

dyjejly.markdown

dyJEjLY

A Pen by ahmed emad on CodePen.

License.

index.html

    <div class="shape">
        <div class="box">
            <div class="child general">عادل شكل</div>
            <div class="child emad">
                <div>
                    <video class="clip" src="clip1.mp4" type="video/mp4" loop width="250px" height="250px"></video>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="child general">اوباما</div>
            <div class="child emad">
                <div>
                    <video class="clip" src="clip2.mp4" type="video/mp4" loop width="250px" height="250px"></video>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="child general">بهجت صابر</div>
            <div class="child emad">
                <div>
                    <video class="clip" src="clip3.mp4" type="video/mp4" loop width="250px" height="250px"></video>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="child general">اطاطا</div>
            <div class="child emad">
                <div>
                    <video class="clip" src="clip4.mp4" type="video/mp4" loop width="250px" height="250px"></video>
                </div>
            </div>
        </div>
    </div>

script.js

 const clip = document.querySelectorAll('.clip');
        for (let i = 0; i < clip.length; i++) {
            clip[i].addEventListener('mouseenter',
                function (e) {
                    clip[i].play()
                })
            clip[i].addEventListener('mouseout',
                function (e) {
                    clip[i].pause()
                })
        }

style.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


.shape {
    background-color: #544f4b;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 20px;
    margin: auto;
    justify-content: space-evenly;
    align-content: space-evenly;
    flex-wrap: wrap;
    position: absolute;
}

.box {
    width: 300px;
    height: 300px;
    background-color: #eee;
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: right center;
    border-radius: 10px;

}

.box:hover {
    transform: translateX(-100%) rotatey(180deg);
}

.child {
    width: 90%;
    height: 90%;
    margin: 5%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}


.emad {
    background-color: black;
    transform: rotatey(180deg);
}

.general {
    font-size: 40px;
    background-color: #eee;
    color: #544f4b;
    font-weight: bold;
}

video {
    object-fit: cover;
}

CLIPS