CSS World--Code Practice: Image Alt Information Presentation

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

Recommend

How to automatically backup mysql remotely under Linux

Preface: Basically, whether it is for our own use...

IE8 browser will be fully compatible with Web page standards

<br />According to foreign media reports, in...

Detailed explanation of JavaScript state container Redux

Table of contents 1. Why Redux 2. Redux Data flow...

JavaScript event loop case study

Event loop in js Because JavaScript is single-thr...

CSS float (float, clear) popular explanation and experience sharing

I came into contact with CSS a long time ago, but...

Introduction to the role of HTML doctype

Document mode has the following two functions: 1. ...

A Deep Understanding of Angle Brackets in Bash (For Beginners)

Preface Bash has many important built-in commands...

HTML background color gradient effect achieved through CSS style

Effect screenshots: Implementation code: Copy code...

Front-end state management (Part 2)

Table of contents 1. Redux 1.1. Store (librarian)...

CentOS 7 builds hadoop 2.10 high availability (HA)

This article introduces how to build a high-avail...

How to bypass unknown field names in MySQL

Preface This article introduces the fifth questio...

Introduction to cloud native technology kubernetes (K8S)

Table of contents 01 What is Kubernetes? 02 The d...