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

Blog    

Recommend

Complete steps to achieve high availability with nginx combined with keepalived

Preface In order to meet the high availability of...

Exploration of three underlying mechanisms of React global state management

Table of contents Preface props context state Sum...

How to draw a cool radar chart in CocosCreator

Table of contents Preface Preview text Graphics C...

Docker data storage tmpfs mounts detailed explanation

Before reading this article, I hope you have a ba...

How to set remote access permissions in MySQL 8.0

The previous article explained how to reset the M...

Detailed explanation of how to use structural pseudo-class selectors and pseudo-element selectors in CSS3

Introduction to structural pseudo-class selectors...

Basic knowledge of load balancing and a simple example of load balancing using nginx

Nginx can generally be used for seven-layer load ...

Tutorial on installing MySQL with Docker and implementing remote connection

Pull the image docker pull mysql View the complet...

Use of MySQL truncate table statement

The Truncate table statement is used to delete/tr...

Briefly describe the difference between MySQL and Oracle

1. Oracle is a large database while MySQL is a sm...

Linux CentOS6.9 installation graphic tutorial under VMware

As a technical novice, I am recording the process...

Linux general java program startup script code example

Although the frequency of starting the shell is v...

The most common declaration merge in TS (interface merge)

Table of contents 1. Merge interface 1.1 Non-func...

Detailed explanation of the idea of ​​installing mysql8.0.11 and changing the root password and connecting navicat for mysql

1.1. Download: Download the zip package from the ...

An article to deal with Mysql date and time functions

Table of contents Preface 1. Get the current time...