تأثيرات الصور التفاعلية باستخدام CSS

تأثيرات الصور التفاعلية باستخدام CSS

يبدو هذا التأثير الأصلي للصور الذي يظهر عند التمرير فوقها رائعًا، والأهم أنه يعتمد بالكامل على CSS. باستخدام أنماط وتأثيرات CSS، يمكنك بسهولة تحقيق نتائج فريدة ومميزة لأي موقع ويب دون الحاجة إلى خدمات معقدة أو إضافات خارجية. من المعروف أن تأثيرات التمرير تُستخدم بشكل متكرر في عناصر تصميم الويب المختلفة، وذلك بسبب سهولة تطبيقها وقدرتها على تحسين تجربة المستخدم بشكل ملحوظ.

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

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

شرح كود تأثير الصور التفاعلي باستخدام CSS

هذا الكود يعرض تأثيرًا تفاعليًا على الصور يظهر عند التمرير فوقها، حيث يتم استخدام CSS لإنشاء تأثيرات رسومية مميزة. سنشرح هنا المكونات الرئيسية للكود وكيفية عمله.

المكونات الرئيسية:

• الهيكل العام: تم استخدام عنصر <div> مع كلاس wrapper لتجميع الصور في مكان واحد.
• الصور: تم استخدام عنصر <img> لعرض الصور، مع إضافة أيقونة YouTube باستخدام Font Awesome.
• التصميم: تم استخدام CSS لتنسيق الصور وإضافة تأثيرات التمرير (hover).

تفاصيل الكود:

• الهيكل الأساسي:
  • تم تعيين خلفية الصفحة باستخدام background-color: #efefef;.
  • تم توسيط الصور باستخدام display: flex; وjustify-content: center; داخل .wrapper.
• تصميم الصور:
  • تم تعيين خصائص عامة للصور مثل height، width، وborder-radius لجعلها تبدو أنيقة.
  • تم استخدام box-shadow لإضافة ظلال حول الصور.
  • تم استخدام transition لإضافة تأثيرات سلسة عند التمرير.
• تأثيرات التمرير (hover):
  • عند التمرير فوق الصورة، يتم تغيير الخلفية باستخدام :after لإنشاء تأثير دائري.
  • يتم تحريك الصورة وتدويرها باستخدام transform: translate(-50%,-50%) scale(1.3) rotate(-360deg);.
  • يتم إظهار أيقونة YouTube باستخدام transform: translate(-50%,-50%);.
• الأيقونات:
  • تم استخدام Font Awesome لإضافة أيقونة YouTube.
  • تم تعيين خصائص الأيقونة مثل position: absolute; وz-index: 2; لجعلها تظهر فوق الصورة.

الخصائص المستخدمة:

• Flexbox: تم استخدام display: flex; لتوسيط العناصر وتنظيمها.
• Transition: تم استخدام transition لإضافة تأثيرات سلسة عند التمرير.
• Transform: تم استخدام transform لتحريك الصور وتدويرها.
• Box Shadow: تم استخدام box-shadow لإضافة ظلال حول الصور.

الكود كاملا

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <title>Image Hover Effect</title>
    <link rel="stylesheet" href="style.css">

   <div class="wrapper">
       <div class="box">
           <img src="https://i1.sndcdn.com/artworks-EQbcd5bSvJCGf1Df-y1R6KQ-t500x500.jpg">
           <i class="fab fa-youtube fa-5x"></i>
       </div>
       <div class="box">
        <img src="https://i1.sndcdn.com/artworks-000153887408-jwhlsi-t500x500.jpg">
        <i class="fab fa-youtube fa-5x"></i>
    </div>
    <div class="box">
        <img src="https://i.ebayimg.com/images/g/vGkAAOSwYNlbxvrt/s-l500.jpg">
        <i class="fab fa-youtube fa-5x"></i>
    </div>
   </div>
    
</div>
    

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

body{
    width: 100vw;
    background-color: #efefef;
}
.wrapper{
    min-height: 100vh;
    overflow: hidden;
    width: 100%;
    padding:2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    overflow: hidden;
    height: 300px;
    width:350px;
    position: relative;
    cursor: pointer;
    margin:0 15px;
    box-shadow: 0 0 25px 1px rgba(0,0,0,.3);
    transition: .5s;
    background-color: #555;
    border-radius: 10px;
} 
.box:after{
    content:'';
    position: absolute;
    z-index: 1;
    top:50%;
    left:50%;
    width:500px;
    height:500px;
    transform: translate(140%,-50%);
    background-color: rgba(63,142,199,0.8);
    border-radius: 50%;
    transition:.8s;
}
.box:hover:after{
    transform: translate(-50%,-50%);
}
.box:hover img{
    transform: translate(-50%,-50%) scale(1.3) rotate(-360deg);
}
img{
    position: absolute;
    height:120%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    transition: .8s;
}
i{
    position: absolute;
    z-index: 2;
    top:50%;
    left:50%;
    transform: translate(2000px,-50%);
    color:#fff;
    transition: .8s;
    transition-timing-function: ease-in;
}
.box:hover i{
    transform: translate(-50%,-50%);
    transition-timing-function: ease;
}
    

معاينــة

هذا الكود يعتبر مثالًا رائعًا لإنشاء تأثيرات تفاعلية على الصور باستخدام HTML وCSS. يمكن تعديل الألوان والتأثيرات بسهولة لتتناسب مع احتياجات التصميم.