92 lines
No EOL
1.8 KiB
CSS
92 lines
No EOL
1.8 KiB
CSS
|
||
body{
|
||
/* affichage du contenu en colonne */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
/* style background et font */
|
||
background-color: black;
|
||
color: white;
|
||
font-family: sans-serif;
|
||
}
|
||
|
||
section{
|
||
width: 100%;
|
||
/* affichage des images en lignes avec retour à la ligne (wrap)*/
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6{
|
||
text-decoration-line: underline;
|
||
text-decoration-color: fuchsia;
|
||
}
|
||
|
||
/* Styling des liens */
|
||
a{
|
||
color: white;
|
||
text-decoration-color: fuchsia;
|
||
}
|
||
|
||
/* lors du hover : fushia */
|
||
a:hover,
|
||
a:active,
|
||
a:focus,
|
||
a:focus-within {
|
||
color: fuchsia;
|
||
}
|
||
|
||
img{
|
||
/* Normalize images */
|
||
display: block;
|
||
/* taille des images */
|
||
width: 300px;
|
||
}
|
||
|
||
div{
|
||
/* position relative pour la >p absolute */
|
||
position: relative;
|
||
/* background pour l’effet blend de l’image */
|
||
background-color: rgb(255, 20, 255);
|
||
/* Prends la taille des images */
|
||
height: fit-content;
|
||
/* Centre les rectangles avec les carrés dans le row (ex: image interlopes)*/
|
||
align-self: center;
|
||
}
|
||
|
||
div>p{
|
||
/* N’affiche pas la balise p par défaut */
|
||
display:none;
|
||
/* Fixe la position du p à l’intérieur de la div / de l’image, au centre */
|
||
position: absolute;
|
||
bottom: calc((100% / 2) - 1em);
|
||
/* style du paragraphe */
|
||
margin: 10px 0;
|
||
width: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
/* style de la font */
|
||
color: white;
|
||
font-size: larger;
|
||
font-weight: bolder;
|
||
/* centre le texte */
|
||
text-align: center;
|
||
}
|
||
|
||
/* HOVER */
|
||
|
||
/* Simule un élément interactif pour le proto (le pointer change) */
|
||
div:hover{
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* lors du hover de la div : blend le background de la div avec l’image */
|
||
div:hover>img{
|
||
mix-blend-mode:multiply;
|
||
}
|
||
|
||
/* Lors du hover de la div, afficher le paragraphe */
|
||
div:hover>p{
|
||
display: block;
|
||
} |