استفسار حول التصميم ب سلة لعنصر 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية