Maison > interface Web > tutoriel CSS > Comment créer une superposition d'images avec CSS et HTML ?

Comment créer une superposition d'images avec CSS et HTML ?

Barbara Streisand
Libérer: 2024-11-03 07:07:03
original
408 Les gens l'ont consulté

How to Create an Image Overlay with CSS and HTML?

Placer une superposition sur une image à l'aide de CSS

Obtenir l'effet de superposition d'une couleur sombre avec du texte et une icône sur une image en survol peut être réalisé avec les CSS et HTML suivants :

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.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);
}
Copier après la connexion
<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>
Copier après la connexion

Voici une démo en direct : http://jsfiddle.net/6Mt3Q/

Personnalisation de la superposition avec Style supplémentaire

Pour améliorer l'apparence de la superposition, vous pouvez ajouter un style supplémentaire comme suit :

<code class="css">.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;
}</code>
Copier après la connexion
<code class="html"><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <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></code>
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal