في البداية ، تم تصميم القسم لثلاث كتل ، ولكن بالقياس ، يمكن زيادتها أو تقليلها بسهولة. للكشف السلس عن وصف الصورة ، يتم استخدام JavaScript قصير.
مثال:
HTML:
<section class="card-container">
<div class="card">
<div class="face face-1">
<img src="https://i.ibb.co/VxG0fNf/57-42.jpg" alt="" />
<h3>sow 57</h3>
</div>
<div class="face face-2">
<p>تم تصميم المقاتلة متعددة الوظائف من طراز Su-57 من الجيل الخامس لتدمير جميع أنواع الأهداف الجوية في قتال بعيد المدى وقريب ، لتدمير الأهداف الأرضية والسطحية. في الوقت نفسه ، يمكن للطائرة التغلب على أنظمة الدفاع الجوي ، والتحكم في المجال الجوي من مسافة بعيدة ، وتدمير أنظمة التحكم في طائرات العدو.</p>
</div>
</div>
<div class="card">
<div class="face face-1">
<img src="https://i.ibb.co/5TYBdGd/33.webp" alt="" />
<h3>طائرات بوينج</h3>
</div>
<div class="face face-2">
<p>11 يومًا - هذا هو الوقت الذي يستغرقه تجميع طائرة بوينج 737 جديدة ومتألقة ، وهي أشهر طائرة ركاب في العالم! في المجموع ، يتم تجميع 38 طائرة شهريًا في مصنع رينتون ، ويتم إنتاج خط 737 نفسه منذ عام 1967! أكثر من 7600 طائرة تم تسليمها للعملاء .. وتم طلب 3000 طائرة أخرى بانتظار التجميع والتسليم! في الوقت نفسه ، فإن الجو على خط التجميع نفسه أكثر من مجرد استرخاء. بصريا ، لا أحد في عجلة من أمره ، لأن أهم شيء هو الأمان ، حيث يكون ثمن الخطأ باهظًا للغاية. لذلك ، يعمل كل موظف في خط التجميع بوتيرة مريحة للغاية دون تسرع أو تعب. في هذا التقرير ، أدعوكم إلى المصنع الذي يتم فيه تجميع طائرات بوينج 737 ، لأنكم جميعًا ، على الأرجح ، قد طارتوا بهذه الطائرة مرة واحدة على الأقل في حياتك!
</p>
</div>
</div>
<div class="card">
<div class="face face-1">
<img src="https://i.ibb.co/BqpsX66/vsf-s.webp" alt="" />
<h3>الكرنفال البرازيلي</h3>
</div>
<div class="face face-2">
<p>بالإضافة إلى الكرنفال البرازيلي السنوي ، الذي أصبح أحد الأحداث الرئيسية لهذا العام في جميع أنحاء العالم ، يمكن للبرازيل أن تقدم للمسافرين أجمل المناظر الطبيعية شبه الاستوائية - الممرات الجبلية ، والشواطئ الضخمة على ساحل المحيط الأطلسي ، والشلالات القوية والغابات التي لا يمكن اختراقها ، رمز الصورة لريو - شاطئ كوباكابانا ، الملاعب الضخمة التي تجمع مشاهد كرة القدم الضخمة.
</p>
</div>
</div>
</section>
Css:
.card-container {
width: 100%;
position: relative;
background: url(https://i.ibb.co/mBC246S/25.webp);
background-size: cover;
background-position: 50% 50%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
height: 500px;
margin: 20px 0;
}
.card-container:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.card-container .card {
margin: -20px 20px;
width: 300px;
}
.card-container .card .face {
width: 100%;
height: 200px;
transition: 0.5s;
background: #FFF;
overflow: hidden;
}
.card-container .card .face-1 {
position: relative;
z-index: 2;
transform: translateY(50px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.card-container .card:hover .face-1 {
transform: translateY(0);
}
.card-container .card .face-1 img {
filter: brightness(0.8);
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}
.card-container .card:hover .face-1 img {
filter: brightness(1)
}
.card-container .card .face-1 h3 {
padding: 10px 0;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
color: #FFF;
width: 100%;
color: #fff;
text-align: center;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
}
.card-container .card .face-2 {
position: relative;
z-index: 1;
opacity: 0;
background: #fff;
padding: 20px 20px 10px;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
transform: translateY(-100px);
height: 100px;
transition: 0.5s;
}
.card-container .card:hover .face-2 {
transform: translateY(0);
opacity: 1;
}
.card-container .card:nth-child(1):hover .face-2 {
height: var(--face_height_1);
}
.card-container .card:nth-child(2):hover .face-2 {
height: var(--face_height_2);
}
.card-container .card:nth-child(3):hover .face-2 {
height: var(--face_height_3);
}
.card-container .card .face-2 p {
margin: 0;
padding: 0 0 10px;
font-size: 15px;
line-height: 1.3;
font-family: Verdana, sans-serif;
}
@media screen and (max-width: 696px) {
.card-container {
margin: 140px 0;
}
}
JAVASCRIPT:
let card = document.querySelectorAll(".card");
for( let i = 1; i <= card.length; i++ ){
document.documentElement.style.setProperty("--face_height_" + i + "", document.querySelector(".card-container .card:nth-child(" + i + ") .face-2").scrollHeight + "px");
}
COMMENTS