Home >Web Front-end >HTML Tutorial >How to create a responsive image filter layout using HTML and CSS

How to create a responsive image filter layout using HTML and CSS

WBOYOriginal: 2023-10-18 12:09:33911browse

In today’s digital age, web design is becoming more and more important. As an important part of web design, pictures play a very important role. In order to make web pages more attractive and charming, we often use picture filters to enhance the effects of pictures. This article will introduce how to use HTML and CSS to create a responsive image filter layout, and provide specific code examples.

HTML structure
First, we need to create an HTML structure to accommodate the image and filter layout. The following is an example of a basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>响应式图片滤镜布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="filter-layout">
        <div class="filter-image">
            <img src="image.jpg" alt="图片">
            <div class="filter-overlay"></div>
            <div class="filter-effect"></div>
        </div>
    </div>
</body>
</html>

CSS Style
Next, we need to use CSS to control layout and filter effects. The following is a basic CSS style example:

.filter-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f1f1f1;
}

.filter-image {
    position: relative;
    overflow: hidden;
    width: 400px; /* 图片容器的宽度 */
    height: 400px; /* 图片容器的高度 */
}

.filter-image img {
    display: block;
    width: 100%;
    height: auto;
}

.filter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 滤镜覆盖层的颜色和透明度 */
}

.filter-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 添加滤镜效果 */
.filter-image:hover .filter-effect {
    background-color: rgba(255, 255, 255, 0.2); /* 滤镜效果的颜色和透明度 */
}

Explanation code
The above code contains three parts:

In the HTML structure , we created a div with class "filter-layout" to accommodate the entire filter layout. Among them, the div of class "filter-image" is used to accommodate pictures, while "filter-overlay" and "filter-effect" are divs used to achieve filter effects.
In the CSS style, we set the "filter-layout" style to center the layout and set the background color. At the same time, by setting the "filter-image" style, we set the image container to a rectangular area with fixed width and height, and set the "overflow" attribute to "hidden" to achieve image cropping. By setting the styles of "filter-overlay" and "filter-effect", we can implement the overlay and bottom layers of the filter effect.
The last part of the CSS code uses the :hover pseudo-class to implement the filter effect when the mouse is hovering. In this example, when the mouse is hovered over "filter-image", the color and transparency of the bottom layer of the filter effect will change, allowing the filter effect to be applied.

Add media queries
In order to make the entire layout a responsive layout, we can add media queries to adapt according to the different sizes of the device. The following is a sample code for media queries:

/* 在宽度小于600px时，图片容器宽度为100% */
@media screen and (max-width: 600px) {
    .filter-image {
        width: 100%;
        height: auto;
    }
}

In the above code, when the width of the device is less than 600px, the width of the image container will be set to 100%, and the height will be automatically adjusted according to the width.

With the above HTML and CSS code examples, we can create a responsive image filter layout. You can modify and expand the style according to your needs and preferences, adding more filter effects or other elements.

Summary
This article introduces how to use HTML and CSS to create a responsive image filter layout. Through reasonable HTML structure and CSS styles, we can implement an image layout with filter effects and make responsive adjustments based on media queries. I hope this article helps you create a responsive image filter layout!

The above is the detailed content of How to create a responsive image filter layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!

css html Filter overflow 伪类

Statement：

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

Previous article：HTML Layout Guide: How to Use Pseudo-Elements for Element DecorationNext article：HTML Layout Guide: How to Use Pseudo-Elements for Element Decoration

See more

How to create a responsive image filter layout using HTML and CSS

Related articles