دمج نص مع صورة

Ali Yasser2 · 22 مارس

السلام عليكم اريد أن أدمج نص مع صورة بحيث لو صغرت الصورة يصغر النص ويكون النص مخفي ويظهر عند تمرير الماوس على الصورة

Mustafa Suleiman · 22 مارس

أنت بحاجة إلى الجمع ما بين HTML, CSS لتنفيذ ذلك، حيث نقوم بإنشاء عنصر <div> يحتوي على الصورة والنص وتعيين خاصية position: absolute للعنصر النصي بجانب خاصية opacity: 0 لإخفائه وتلك الخاصية مهمة لكي يتم إظهاره وعمل animation أثناء الظهور فهي الخاصية الوحيدة التي تسمح لنا بذلك عند عمل hover على النص.

كالتالي:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.img-container {
  position: relative;
  text-align: center;
  color: white;
width: 400px;
height: 400px
}


.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(4px);
    color: black;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;

}

.img-container:hover .centered{
    opacity: 1
}
</style>
</head>
<body>

<div class="img-container">
  <img src="https://placehold.co/400x400" alt="Snow" style="width:100%;">
  <div class="centered">Centered</div>
</div>

</body>
</html>

دمج نص مع صورة

السؤال

Ali Yasser2

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

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

1 جواب على هذا السؤال

Recommended Posts

Mustafa Suleiman

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية