Beginner's article: How to use CSS to create image and text layout (code sharing)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Beginner's article: How to use CSS to create image and text layout (code sharing)

奋力向前

Sep 14, 2021 pm 05:43 PM

css

In the previous article "Teach you step by step how to use css to create table border setting effects (with code)", I introduced you how to use css to create table border setting effects. The following article will introduce to you how to use CSS to create image and text layout. Let’s take a look at how to do it.

Beginner's article: How to use CSS to create image and text layout (code sharing)

There are often such CSS image and text layouts in web pages. Let me share with you the renderings and see the effect. Let’s study how to achieve it. Let us explain the basic process of html css image text layout.

Beginners article: How to use CSS to create image and text layout (code sharing)

Mainly use CSS attributesvisibility: hidden;Hide the p label text, and then use hoverSelector to change the height of the class card and display the p label text visibility: visible;.

1. First, create a new HTML file and define three div tags.

<body>
 
        <div class="container">
            <div class="card">
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="54545454.jpg"  class="lazy"    alt="Beginner's article: How to use CSS to create image and text layout (code sharing)" >
                    <!-- one -->
                </div>
                <div class="top-text">
                    <div class="name">
                        第一次班级聚会
                    </div>
                </div>
                <div class="bottom-text">
                    <div class="text">
                        还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，
                        一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，
                        有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。
                    </div>
                </div>
            </div>
            <!-- two -->
            <div class="card">
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="54545454.jpg"  class="lazy"    alt="Beginner's article: How to use CSS to create image and text layout (code sharing)" >
                </div>
                <div class="top-text">
                    <div class="name">
                        优秀班级评比
                    </div>
                    <!-- <p>Apps Developer</p> -->
                </div>
                <div class="bottom-text">
                    <div class="text">
                        还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，
                        参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，
                        争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。
                    </div>
                </div>
            </div>
            <!-- three -->
            <div class="card">
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="54545454.jpg"  class="lazy"    alt="Beginner's article: How to use CSS to create image and text layout (code sharing)" >
                </div>
                <div class="top-text">
                    <div class="name">
                        团日活动
                    </div>
                </div>
                <div class="bottom-text">
                    <div class="text">
                        还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动，
                        我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，
                        看到旁边的人举起大拇指，感觉此刻值了。
                    </div>
                </div>
            </div>
        </div>
    </body>

Copy after login

2. The class of the div box is set to container to avoid floating layout. The bottom is not aligned.

3. Add style settings to container: display: flexFlexible layout; align-items: centerAlign in the center along the vertical axis;justify-content: left Just align the axis direction to the left.

<style type="text/css">
            .container{
                width: 100%;
                height: 500px;
                padding: 0px 40px;
                display: flex;
                align-items: center;
                justify-content: left;
            }

Copy after login

Code effect

Beginners article: How to use CSS to create image and text layout (code sharing)

4. Add style settings to card: transition attribute mouseover; box-shadowSet the shadow effect; background-colorThe background color of the attribute element.

.card{
                height: 270px;
                max-width: 350px;
                margin: 0px 20px;
                background-color: white;
                transition: 0.4s;
                box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
            }

Copy after login

5. Select the mouse movement style for the hover selector.

.card:hover{
                height:400px;
                box-shadow:5px 5px 10px rgba(0,0,0,0.2);
            }

Copy after login

6. Use the img tag to process the image size width and height, object-fit: cover to cut the image and retain the original proportion of the image.

.card .img{
                height: 200px;
                width: 100%;
            }
            .card .img img{
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

Copy after login

7, visibility: hidden;Hide the p label text and add the transition attribute on mouseover.

.card .bottom-text{
                text-indent: 2em;
                padding: 0 20px 10px 20px;
                margin-top: 5px;
                 background-color: white;
                 visibility: hidden;
                 transition: 0.5s;

Copy after login

8, hover selector to change the height of class card, and plabel textvisibility: visible;display.

.card:hover .bottom-text{
    opacity: 1;
    visibility: visible;

Copy after login

ok, done! !

Complete code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<meta charset="utf-8">
<title>CSS图片文字排版</title>
<style type="text/css">
    .container{
        width: 100%;
        height: 500px;
        padding: 0px 40px;
        display: flex;
        align-items: center;
        justify-content: left;
    }
    .card{
        height: 270px;
        max-width: 350px;
        margin: 0px 20px;
        background-color: white;
        transition: 0.4s;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
    .card:hover{
        height:400px;
        box-shadow:5px 5px 10px rgba(0,0,0,0.2);
    }
    .card .img{
        height: 200px;
        width: 100%;
    }
    .card .img img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .card .top-text{
        padding-top: 5px;
    }
    .card .top-text .name{
        font-size: 25px;
        font-weight:600;
        color: #202020;
    }
    .card .top-text p{
        font-size: 20px;
        font-weight:600;
        color: #e74c3c;
        line-height: 20px;
    }
    .card .bottom-text{
        text-indent: 2em;
        padding: 0 20px 10px 20px;
        margin-top: 5px;
         background-color: white;
         visibility: hidden;
         transition: 0.5s;
    }
    .card:hover .bottom-text{
        opacity: 1;
        visibility: visible;
    }
    .card .bottom-text .text{
        text-align: justify;
    }
 
 
 
<div class="container">
    <div class="card">
        <div class="img">
            <img src="/static/imghw/default1.png" data-src="54545454.jpg" class="lazy" alt="Beginner's article: How to use CSS to create image and text layout (code sharing)">
            <!-- one -->
        </div>
        <div class="top-text">
            <div class="name">
                第一次班级聚会
            </div>
        </div>
        <div class="bottom-text">
            <div class="text">
                还记的，2018年，大一下学期，开学我们第一次班级聚会，相聚在北海园博园假山，
                一起动手、齐力快乐的一起烧烤，虽然天色黑的伸手不见五指，让人害怕，但我们相聚在一起，
                有说有笑，彼此相知，却一点感觉不到害怕，那刻，仿佛时间停住了，只剩下快乐相伴。
            </div>
        </div>
    </div>
    <!-- two -->
    <div class="card">
        <div class="img">
            <img src="/static/imghw/default1.png" data-src="54545454.jpg" class="lazy" alt="Beginner's article: How to use CSS to create image and text layout (code sharing)">
        </div>
        <div class="top-text">
            <div class="name">
                优秀班级评比
            </div>
            <!-- <p>Apps Developer</p> -->
        </div>
        <div class="bottom-text">
            <div class="text">
                还记得，大二上学期，一次晚点名辅导员说，每个班级要拍出最美的班级照，
                参加最美班级的摄影评比，我们大家一起在群里齐思广议，每个人把自己觉得好的想法分享出来，
                争取拍几张最美的班级照，很想说，我们大家认真付出的样子真的帅呆了。
            </div>
        </div>
    </div>
    <!-- three -->
    <div class="card">
        <div class="img">
            <img src="/static/imghw/default1.png" data-src="54545454.jpg" class="lazy" alt="Beginner's article: How to use CSS to create image and text layout (code sharing)">
        </div>
        <div class="top-text">
            <div class="name">
                团日活动
            </div>
        </div>
        <div class="bottom-text">
            <div class="text">
                还记得，大二下学期，大家为了完成辅导员下发了“最美北海”我为北海做的那些事志愿活动，
                我们大家来到北海美丽的海滩公园，齐心志愿动手去捡垃圾，保护海滩，大家人认真捡着垃圾，
                看到旁边的人举起大拇指，感觉此刻值了。
            </div>
        </div>
    </div>
</div>

Copy after login

Recommended learning: CSS video tutorial

The above is the detailed content of Beginner's article: How to use CSS to create image and text layout (code sharing). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Where to find the Site Office Key in Atomfall

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7868

Java Tutorial

1649

CakePHP Tutorial

1407

Laravel Tutorial

1301

PHP Tutorial

1243

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

See all articles