استفسار حول التصميم ب سلة لعنصر div شفاف فيه نص بسيط وله إطار border يظهر مع تأثير حركي فوق صورة عند عمل hover

Karam Alshoufi · 7 مارس 2022

كيف يمكنني عمل هذا الشيء بالمنتجات في متجر سلة والفكرة موضحة بالفيديو

SVID_20220307_225040_1.mp4

Wael Aljamal · 8 مارس 2022

يمكنك تطبيق المطلوب عن طريق خصائص CSS لقد قمت بتصميم شيء مشابه لما طلبته وهو بالشكل التالي:

فيها نص و حواف تكون مخفية ثم تظهر مع حدث hover و لها تأثير تكبير وهو scale 1.2

والشيفرة البرمجية:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: Arial;
        font-size: 17px;
      }

      .container {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
      }

      .container img {
        vertical-align: middle;
        width: 100%;
      }

      h1 {
        text-align: center;
        position: absolute;
        top: 40%;
        left: 40%;
      }

      .container .content {
        position: absolute;
        top: 10%;
        left: 10%;
        color: black;
        background: rgba(0, 0, 0, 0);
        color: #f1f1f1;
        width: 80%;
        height: 80%;
        margin: auto;
        border: 1px solid;
        opacity: 0;
        transform: scale(1);
        transition: all 1s ease;
      }

      .container:hover .content {
        opacity: 1;
        transform: scale(1.2);
        transition: all 0.75s ease;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <img src="notebook.jpg" />
      <div class="content content-transition">
        <h1>Book</h1>
      </div>
    </div>
    <div class="container">
      <img src="notebook.jpg" />
      <div class="content content-transition">
        <h1>Book</h1>
      </div>
    </div>
    <div class="container">
      <img src="notebook.jpg" />
      <div class="content content-transition">
        <h1>Book</h1>
      </div>
    </div>
  </body>
</html>

الملف:

books.rar

Wael Aljamal · 8 مارس 2022

توضيح: transform هي خاصية تحدد نوع الانتقال أو التحول على العنصر، transition تحدد نمط الحركة و مدتها، opacity أخفينا العنصر بإعطائها 0 ثم إظهاره بقيمة 1.

transition: all لكي نشمل جميع الخصائص وهي opacity , transform وتعمل بشكل معاكس، بين الطور الرئيسي (مخفي) لطور ال hover حيث يصبح (ظاهر).

استفسار حول التصميم ب سلة لعنصر div شفاف فيه نص بسيط وله إطار border يظهر مع تأثير حركي فوق صورة عند عمل hover

السؤال

Karam Alshoufi

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية