نمایش متن با حرکت موس روی عکس

در صورتیکه بخواهیم یک عکس پست وبسایت شما با تعامل بیشتری با کاربر ارتباط برقرار کند، میتواینم از روش زیر عمل کنیم که طراحی وبسایت شما را زیبا خواهد کرد.

html

    
         <h2>ظاهر شدن متن روی عکس  </h2>
         <p>روی عکس موس را نگه دارید این متن نمایش داده می شود. </p>

         <div class="container">
           <img src="/images/pic.jpg" alt="Avatar" class="image">
           <div class="overlay">اسم من شبنم بهمنی است. </div>
         </div>
    

استایل و css3

   * {
     box-sizing: border-box;
     direction: rtl;
    }

    .container {
        position: relative;
        width: 50%;
        max-width: 300px;
    }

    .image {
        display: block;/*یعنی عرض 100% به این کلاس اختصاص داده می شود. */
        width: 100%;
        height: auto;
    }

    .overlay {
        position: absolute;
        bottom: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5); /* ناحیه مشکی روی عکس */
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity:0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
        
    }

    .container:hover .overlay {
        opacity: 1; /* میزان روشنایی است */
    }

خروجی :