Scribd Logo
Upload

Welcome to Scribd!

  • 23 views

    Test Image Text Overlay

    Uploaded by

    s
    This document defines styles for an image overlay effect on a web page. When the user hovers over an image, the overlay text "John" appears at the bottom and overlay text "Tom" appears at the top left, positioned with JavaScript. The styles position the overlays absolutely, set opacity to change on hover, and define other formatting properties.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Test Image Text Overlay

    Uploaded by

    s
    23 views2 pages
    This document defines styles for an image overlay effect on a web page. When the user hovers over an image, the overlay text "John" appears at the bottom and overlay text "Tom" appears at the top left, positioned with JavaScript. The styles position the overlays absolutely, set opacity to change on hover, and define other formatting properties.

    Original Description:

    Original Title

    test image text overlay

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines styles for an image overlay effect on a web page. When the user hovers over an image, the overlay text "John" appears at the bottom and overlay text "Tom" appears at the top left, positioned with JavaScript. The styles position the overlays absolutely, set opacity to change on hover, and define other formatting properties.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    23 views2 pages

    Test Image Text Overlay

    Uploaded by

    s
    This document defines styles for an image overlay effect on a web page. When the user hovers over an image, the overlay text "John" appears at the bottom and overlay text "Tom" appears at the top left, positioned with JavaScript. The styles position the overlays absolutely, set opacity to change on hover, and define other formatting properties.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box;}

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

    .image {
    display: block;
    width: 100%;
    height: auto;
    }

    .overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    }

    .overlay2 {
    position: absolute;
    top: 20px;
    left: 15px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 1%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    }

    .container:hover .overlay {
    opacity: 1;
    }

    .container:hover .overlay2 {
    opacity: 1;
    }
    </style>
    </head>
    <body>

    <h2>Image Overlay Title</h2>


    <p>Hover over the image to see the effect.</p>

    <div class="container">
    <img src="img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">John</div>
    <div class="overlay2" id="p2" >Tom</div>
    </div>

    <script>
    document.getElementById("p2").style.top = "50px";
    document.getElementById("p2").style.left = "100px";
    </script>

    </body>
    </html>

    You might also like