كيف انشاء معرض للصور والكتابة فوق الصور في HTML ,CSS[ انشاء معرض للصور والكتابة فوق الصور

0 550

 

                                                          

سيظر المعرض لديك  كما موضح في الفيديو

                                                                   

 الان قم بانشاء ملف Html وقم باضافة الاكواد في الصفحة

<!DOCTYPE HTML>
<html>
<head>
    <link rel=”stylesheet” href=”style.css”>
</head>
<body>
    <div class=”main center”>
        <div class=”box”>
            <img src=”https://mena-monitor.org/wp-content/uploads/2020/11/%D8%A7%D8%B3%D8%B7%D9%86%D8%A8%D9%88%D9%84.jpg” width=”400px” height=”400px”>
            <div class=”content center”>
                <h1>اسطنبول</h1>
                <p>ااسطنبول مدينة تركيا تفع شمال غرب تركيا </p>
                <p>وتطل اسطنبول علئ خليج مرمرة والبحر الاسود </p>
            </div>
        </div>
        <div class=”box”>
            <img src=”https://meastmorning.com/wp-content/uploads/2019/05/word-image-24-750×430.jpeg” width=”400px” height=”400px”>
            <div class=”content center”>
                <h1>اسطنبول</h1>
                <p>ااسطنبول مدينة تركيا تفع شمال غرب تركيا </p>
                <p>وتطل اسطنبول علئ خليج مرمرة والبحر الاسود </p>
            </div>
        </div>
        <div class=”box”>
            <img src=”https://cnn-arabic-images.cnn.io/cloudinary/image/upload/w_780,c_scale,q_auto/cnnarabic/2017/04/21/images/87820.jpg” width=”400px” height=”400px”>
            <div class=”content center”>
                <h1>اسطنبول</h1>
                <p>ااسطنبول مدينة تركيا تفع شمال غرب تركيا </p>
                <p>وتطل اسطنبول علئ خليج مرمرة والبحر الاسود </p>
            </div>
        </div>
    </div>
</body>
</html>

بعد ان اضافت الاكواد داخل الصفحة تاكد من وجود ملف CSS وقم بربطة في صفحة Html وقم باضافة الاكواد 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.main{
    width: 100%;
    height: 100vh;
    background: #000;
    
}
.box{
    width: 350px;
    height: 350px;
    position: relative;
    cursor: pointer;
    margin: 20px;
    overflow: hidden;
}
.box img{
    transition: all .5s;
}
.content{
    position: absolute;
    top: 50px;
    left: 50px;
    transform: translate(-50%,-50%);
    width:300px;
    height: 300px;
    background: rgba(255,255,255,0.5);
    flex-direction: column;
    color: white;
    clip-path:circle(0% at 50% 50%);
    transition: all .5s;
}
.content p{
    margin:0px 18px -17px 124px;
}
.box:hover .content{
     clip-path:circle(100% at 50% 50%);
}
.box:hover img{
    filter: blur(10px);
    transform: scale(1.1);
}
اذا واجهت مشاكل اكتب في التعليقات ..
اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

يستخدم هذا الموقع ملفات تعريف الارتباط لتحسين تجربتك. سنفترض أنك موافق على ذلك ، ولكن يمكنك إلغاء الاشتراك إذا كنت ترغب في ذلك. قبول قراءة المزيد