css animations & transitions (image scale)


فهاد ال projet الجديد من سلسلة css animations & transitions غادي نقادوا image scale transition ولي سبق ودرناه فالقناة على يوتيوب ولي مممكن تشوف الشرح ديالو المفصل فالفيديو المرفق.

نظرة سريعة بالفيديو


1- إضافة ل INDEX.HTML


أول حاجة زيد dossier جديد سميه لي بغيتي فيه زيد fichier index.html لي هو الصفحة الرئيسية ولي فيه ل image لي إسترجعناها من موقع للصور المجانية لي هو https://pixabay.com ولي غادي نزيدولها style css.

الكود ديال الملف هو :

                                    
                                        //
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
    <link rel="stylesheet" href="style.css">
    <title>IMAGE SCALE</title>
</head>

<body>
    <div class="container">
        <img src="https://cdn.pixabay.com/photo/2019/10/30/16/19/fox-4589927__340.jpg" alt="" srcset="">
    </div>
</body>

</html>
                                    
                                

2- إضافة الملف STYLE.CSS


منبعد زيد الملف style.css لي غادي يكون فيه style css لي غادي يمكنا باش نزيدو scale و translate ل image ديالنا.

الكود ديال الملف هو :

                                    
                                        //
body{
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container{
    width: 400px;
    height : 400px;
    border : 5px solid #000; 
    overflow: hidden;
    position: relative;
}

img{
    width: 100%;
    height : 100%;
    transition: transform 1s linear;
}

img:hover{
    transform: scale(2);
}

.container:before{
    content : '\f06e';
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-family: 'Font Awesome 5 Free';
    position : absolute;
    text-align: center;
    left : 0;
    top : 0;
    background-color: beige;
    height: 100%;
    width : 100%;
    z-index: 1;
    transform-origin: top;
    transform: translate(0);
    transition: transform 1s;
}

.container:hover:before{
    transform: translateY(-100%);
}
                                    
                                

كلمات مفاتيح :

دروس ذات صلة