Home > Article > Web Front-end > How to overlap images in css

How to overlap images in css

青灯夜游Original: 2021-07-27 17:11:199874browse

How to overlap images in css: First, add the "position: absolute;" style to the image for absolute positioning; then use the margin-left and margin-top attributes to set the image position.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Use css to overlay two images. You can set the image overlay effect through the position positioning attribute and the margin-left and margin-top attributes.

Code example:

Use CSS to implement image overlap. When the mouse hovers over the first image, the second image will be displayed.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片重叠</title>
    <style>
        ul li {
            position: relative;
            float: left;
        }

        ul li #play {
            position: absolute;
            width: 150px;
            height: 100px;
            margin-top: 85px;
            margin-left: 78px;
            display: none;

        } 

        ul li #yuan {
            position: absolute;
            width: 300px;
            height: 300px;
            margin-left: 0px;
            margin-top: 0px;
        }

        ul li #yuan:hover +#play {
            display: block;
        }


        
    </style>
</head>
<body>
    <ul>
        <li>
            <!-- <img  id="play" src="img/ia_100000164.jpg" alt="How to overlap images in css" > -->
            <img  id="yuan" src="img/ia_100000165.jpg" alt="How to overlap images in css" >
            <!-- 放在下面，反而显示在上面 -->
            <img  id="play" src="img/ia_100000164.jpg" alt="How to overlap images in css" >
        </li>


    </ul>
</body>
</html>

Rendering:

How to overlap images in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to overlap images in css. For more information, please follow other related articles on the PHP Chinese website!

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：css skills: how to add a mask to an image (share)Next article：css skills: how to add a mask to an image (share)

See more

How to overlap images in css

Related articles