دمج نص مع صورة

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية