Figure Figure Caption Label attribute meaning and usage

An overview of the

Figure is used to define a captioned content element, and Figcaption is used to add a title and description to the figure element.

Illustrated cards are common on a page, which contain a description, title, or button for the image.

A common way to do this would be to set background: URL () with the image as the background of the div element, and the remaining description and title as children of the div element.

Or add an IMG element inside the div element, with the rest of the description and title positioned above the image.

While both can implement the card style above, the structure and semantics of HTML are not very obvious.

The following HTML structure is very clear. Figure shows an illustration card as a whole. Img is the illustration, and figcaption is the description and title of the image.

<figure>
    <img src="image.png" alt="">
    <figcaption>caption and descriptions</figcaption>
</figure>
Copy the code

Therefore, the use of figure elements is obvious, but the content of figure elements is not limited to pictures, but also includes tables, code sections, poems, etc.

features

figure / figcaptionIs a block-level double label, andHTML5New, browser support is relatively high,IE8And the following are not supported
figureContains a default margin that varies by browser.figureThe default width is100%, highly dependent on the height of its content
figureYou can have multiple children, butfigcaptionAt best, only one
figureThe rest of the content of the element should be related to the main content, and the location of the other content should be independent of the main content. For example, in the illustrated card, the description information and title are related to the picture, but the position and picture of the description information and title are independent of each other, so delete themfigcaptionElements do not affect the whole

The instance

The picture

<figure>
    <img src="image.png" alt="">
    <figcaption>caption and descriptions</figcaption>
</figure>
Copy the code

Code segment

<figure>
    <figcaption>code</figcaption>
    <pre>
        function log(val) {
            console.log(val)
        }

        log('hello world')
    </pre>
</figure>
Copy the code

The reference text

<figure>
    <figcaption>Shakespeare: </figcaption>
    <blockquote>Nutrition books in the world. There is no book in life, there is no sunlight; wisdom without
        books, as if the birds do not have wings. </blockquote>
</figure>
Copy the code

poetry

<figure>
    <figcaption>Tengwang pavilion preface</figcaption>
    <p>Sunset clouds and lone ducks flying together, autumn water together long sky color.</p>
</figure>
Copy the code

application

The illustration cards in Tympanus have many hover effects, which are realized by using figures and figcaption. Then manually implement a simple.

Start by constructing the HTML infrastructure, with a few font and width constraints.

figure {
    margin: auto;
    min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    font-family: 'Raleway', Arial, sans-serif;
    cursor: pointer;
}

<figure>
    <img src="iamge.png" alt="">
    <figcaption></figcaption>
</figure>
Copy the code

Figure caption is the description of the picture and the title, the caption is positioned on the figure.

figure {
    ...
    position: relative;
}

figcaption {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 2em;
    box-sizing: border-box;
}
Copy the code

Complete figcaption interior structure.

<figcaption>
    <h2>Messy<span>Duke</span></h2>
    <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
</figcaption>
Copy the code

The illustrated cards are shown below for the time being.

The color of the text is changed and centered, the font in H2 is slightly changed, the scale is reduced by 0.8, and the text is displayed in upper case.

figcaption {
    ...
    color: #fff;
    text-align: center;
}

figure h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    transform: scale(0.8);
}

figure h2 span {
    font-weight: 600;
}
Copy the code

Adjust the position of the P label to reduce the scale by 0.8.

figure p {
    position: absolute;
    left: 0;
    bottom: 30px;
    margin: 20px;
    padding: 30px;
    border: 2px solid #fff;
    font-size: 18px;
    transform: scale(0.8);
}
Copy the code

The illustrated cards are preliminarily completed.

Then consider the mouse hover style. After the mouse hover, the image is enlarged by 2 times, the transparency is from 0.8 to 0.1, the font size is restored to its original size, and the transparency of P label is from 0 to 1.

figure{
    ...
    overflow: hidden;
}

figure p {
    ...
    opacity: 0;
}

figure img {
    opacity: 0.8;
}

figure:hover img{
    opacity: 0.1.transform: scale(2);
}

figure:hover h2{
    transform: scale(1);
}

figure:hover p{
    transform: scale(1);
    bottom: 0;
    opacity: 1;
}
Copy the code

Check out the suspension effect.

It looks strange. Figure with gradient background color.

figure{
    ...
    background: linear-gradient(-45deg, #34495e 0%, #cc6055 100%);
}
Copy the code

That smell!

Add transitions to each element.

figure h2 {
    ...
    transition: transform 0.35s;
}

figure p {
    ...
    transition: opacity 0.35s, transform 0.35s, bottom 0.35s;
}

figure img {
    ...
    transition: opacity 0.35s, transform 0.35s;
}
Copy the code

Let’s see what the end result is.

You can verify this last feature by tentatively removing the Figcaption element and find little effect on the overall page structure.

Post a copy of the complete code.

<style>
    figure {
        margin: auto;
        min-width: 320px;
        max-width: 480px;
        max-height: 360px;
        position: relative;
        font-family: 'Raleway', Arial, sans-serif;
        overflow: hidden;
        background: linear-gradient(-45deg, #34495e 0%, #cc6055 100%);
        cursor: pointer;
    }

    figcaption {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 2em;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
    }

    figure h2 {
        margin: 0;
        font-size: 30px;
        font-weight: 300;
        text-transform: uppercase;
        transform: scale(0.8);
        transition: transform 0.35s;
    }

    figure h2 span {
        font-weight: 600;
    }

    figure p {
        position: absolute;
        left: 0;
        bottom: 30px;
        margin: 20px;
        padding: 30px;
        border: 2px solid #fff;
        font-size: 18px;
        transform: scale(0.8);
        opacity: 0;
        transition: opacity 0.35s, transform 0.35s, bottom 0.35s;
    }

    figure img {
        opacity: 0.8;
        transition: opacity 0.35s, transform 0.35s;
    }

    figure:hover img {
        opacity: 0.1;
        transform: scale(2);
    }

    figure:hover h2 {
        transform: scale(1);
    }

    figure:hover p {
        transform: scale(1);
        bottom: 0;
        opacity: 1;
    }
</style>

<body>
    <figure>
        <img src="image.png" alt="">
        <figcaption>
            <h2>Messy<span>Duke</span></h2>
            <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
        </figcaption>
    </figure>
</body>
Copy the code

Figure Figure Caption Label attribute meaning and usage

An overview of the

features

The instance

The picture

Code segment

The reference text

poetry

application

Related Posts

JavaScript ES(6-11) full version syntax (9) : Map

Vue2 principle and code analysis

Introduction and use of front-end cookies encapsulation