CSS World--Code Practice: Image Alt Information Presentation

Using the <img> element with the default src to achieve the scrolling loading effect, however, there may be such an experience problem: if our JavaScript loads slowly, our page is likely to have patches of white image areas, pure white, without any information, and the user has no idea what the content is.
Although the alt attribute can provide descriptive information, it is hidden due to poor visual effects. We can display the alt information before the image is loaded:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS World--Code Practice--Image Alt Information Presentation</title>
        <style>
            /* Scrolling loading effect CSS */
            /* img {
                visibility: hidden;
            }

            img[src] {
                visibility: visible;
            } */

            img {
                display: inline-block;
                width: 180px;
                height: 100px;
                /* Hide Firefox alt text */
                color: transparent;
                position: relative;
                overflow: hidden;
            }

            img:not([src]) {
                /* Hide Chrome alt text and silver border */
                visibility: hidden;
            }

            img::before {
                /* Light blue background */
                content: "";
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #f0f3f9;
                visibility: visible;
            }

            img::after {
                /* Black alt information bar*/
                content: attr(alt);
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                line-height: 30px;
                background-color: rgba(0, 0, 0, .5);
                color: white;
                font-size: 14px;
                transform: translateY(100%);
                /* Add some transition animation effects*/
                transition: transform .2s;
                visibility: visible;
            }


            img:hover::after {
                transform: translateY(0);
            }

        </style>
    </head>

    <body>
        <div style="width: 200px;height: 200px;background: blanchedalmond;overflow: auto;">
            <!-- Scrolling loading effect HTML: -->
            <!-- <img> -->
            <img alt="图1" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg">
            <img alt="Beautiful woman meditating" data-src="1.jpg">
            <img alt="图3" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg">
            <img alt="Meditation Picture" data-src="1.jpg">
        </div>
    </body>
    <script>

    </script>

</html>

Operation effect:

This is the end of this article about CSS World - Image ALT Information Presentation in Code Practice. For more relevant CSS image alt information content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Complete the search function in the html page

>>: The difference between absolute path and relative path in web page creation

MySQL multi-table query detailed explanation

CSS World--Code Practice: Image Alt Information Presentation

MySQL multi-table query detailed explanation

How to get the contents of .txt file through FileReader in JS

Use standard dl, dt, dd tags to discard table lists

CSS shadow animation optimization tips

Cross-host communication between docker containers-overlay-based implementation method

Solve the problem of setting Chinese language pack for Docker container

Introduction to Docker Quick Deployment of SpringBoot Project

HTML web page hyperlink tag

MySQL 8.0.13 installation and configuration method graphic tutorial under Windows 64 bit

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

Recommend

Front-end state management (Part 2)

A brief discussion on adaptive layout issues on mobile devices (responsive, rem/em, Js dynamics)

A pitfall and solution of using fileReader

The new version of Chrome browser settings allows cross-domain implementation

Sample code for installing ASPNET.Core3.0 runtime in Linux

Eight examples of how Vue implements component communication

How to control the startup order of docker compose services

MySQL database implements OLTP benchmark test based on sysbench

Solution to the problem of child element margin-top causing parent element to move

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

Practical tutorial on modifying MySQL character set

A brief introduction to bionic design in Internet web design

Detailed explanation of the execution principle of MySQL kill command

Detailed explanation of HTML form elements (Part 2)

Using NTP for Time Synchronization in Ubuntu