Maison  >  Article  >  interface Web  >  Comment créer une superposition d'image CSS avec des hauteurs différentes mais une largeur constante ?

Comment créer une superposition d'image CSS avec des hauteurs différentes mais une largeur constante ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-30 10:09:27426parcourir

How to Create a CSS Image Overlay with Different Heights but Consistent Width?

Superposition CSS sur les images : un guide complet

Introduction

Créer une superposition d'images est une tâche courante dans la conception de sites Web. Il vous permet d'ajouter du texte, des icônes ou d'autres informations sur une image, créant ainsi un effet visuellement attrayant et informatif. Dans cet article, nous explorerons comment y parvenir à l'aide de CSS, en nous concentrant spécifiquement sur le cas où les images ont des hauteurs différentes tout en conservant une largeur cohérente.

Création de la superposition d'images

Pour obtenir cet effet, nous utiliserons un conteneur div pour contenir l'image et le contenu superposé. Les règles CSS suivantes créeront la superposition :

.image-container {
    position: relative;
    width: 200px;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

Structure HTML

La structure HTML inclura l'image et le contenu de la superposition :

<div class="image-container">
    <img src="image.jpg">
    <div class="after">This is some content</div>
</div>

Amélioration de la superposition

Pour améliorer l'apparence de la superposition, nous pouvons ajouter des styles CSS supplémentaires. Par exemple :

.image-container .after .content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
}

Cela alignera verticalement le contenu de superposition en bas.

Démo personnalisée

Voici une démo plus complexe avec des fonctionnalités supplémentaires style, comme une icône et du texte :

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}

.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}

.image-container .after .zoom:hover {
    color: #FFF;
}
<div class="image-container">
    <img src="image.jpg">
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom"><i class="fa fa-search"></i></span>
    </div>
</div>

Cette démo mise à jour ajoute une icône de zoom animée à la superposition, offrant un intérêt visuel supplémentaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn