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

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!