test.css

À propos du fichier

Type de fichier

Fichier CSS de 2 Ko (text/plain)

Confidentialité

Fichier public, envoyé le 29 décembre 2018 à 20:51, depuis l'adresse IP 79.81.x.x (France)

Sécurité

Ne contient aucun Virus ou Malware connus - Dernière vérification: hier

Statistiques

La présente page de téléchargement a été vue 413 fois depuis l'envoi du fichier

Page de téléchargement

https://www.petit-fichier.fr/2018/12/29/test/   Copier

Aperçu du fichier

/********* Superposition simple de texte sur une image *******/
/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 450px;
}
/* Image originale */
.overlay-image .image {
 display: block;
 width: 450px;
 height: 250px;
 -moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
box-shadow: 2px 2px 2px;
}
/* Texte original */
.overlay-image .text {
 color: #fff;
 font-size: 50px;
 font-family: 'Nothing You Could Do', cursive;
 text-transform: lowercase;
 letter-spacing: -9px;
 line-height: 1.5em;
 text-shadow: 3px 3px 3px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 opacity: 1;
}

.overlay-image .titre {
	 color: #fff;
 font-size: 30px;
 font-family: 'Nothing You Could Do', cursive;
 text-transform: lowercase;
 letter-spacing: -5px;
 line-height: 1.5em;
 text-shadow: 3px 3px 3px #00;
 text-align: center;
 position: absolute;
 top: 80%;
 left: 20%;
 transform: translate(-50%, -50%);
 width: 100%;
 opacity: 0.5;
 }

.overlay-image .quote {
	 color: #fff;
 font-size: 30px;
 font-family: 'Alex Brush', cursive;
 text-transform: lowercase;
 letter-spacing: -1px;
 line-height: 1em;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 }

/********* Hover image et texte *******/
/* Overlay */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
 -moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
}

/********* Hover background et texte uniquement *******/
.overlay-image .normal {
 transition: .6s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.4);
}

.background {
 width:450px;
 font-size: 11px;
 text-align: justify;
 font-family: 'Arial';
}

.maj {font-family: 'Alex Brush';
font-size: 50px;
opacity: 0.5;
text-transform: uppercase;
letter-spacing: -7px;
text-shadow: 3px 3px 3px #000;
float: left;
margin-bottom: -15px;
}

Partager le fichier test.css sur le Web et les réseaux sociaux:

Télécharger le fichier test.css