Alype/arq-front_image-dithered
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

suppr lignes inutiles + commentaires + style des liens

Browse source
This commit is contained in:
Alype 2025-08-12 16:24:51 +02:00
parent d56676e523
commit 5ebf4f66cf
1 changed files with 61 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

100
style.css
View file

@ -1,18 +1,10 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html {
/* reset display */
display: block;
}
body{ body{
/* affichage du contenu en colonne */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
/* style background et font */
background-color: black; background-color: black;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
@ -20,11 +12,11 @@ body{
section{ section{
width: 100%; width: 100%;
/* affichage des images en lignes avec retour à la ligne (wrap)*/
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center;
} }
h1,h2,h3,h4,h5,h6{ h1,h2,h3,h4,h5,h6{
@ -32,39 +24,69 @@ h1,h2,h3,h4,h5,h6{
text-decoration-color: fuchsia; text-decoration-color: fuchsia;
} }
img{ /* Styling des liens */
width: 300px; a{
display: block; 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{ div:hover>img{
mix-blend-mode:multiply; mix-blend-mode:multiply;
} }
div{ /* Lors du hover de la div, afficher le paragraphe */
position: relative;
background-color: rgb(255, 20, 255);
height: fit-content;
}
div>p{
position: absolute;
display:none;
bottom: calc((100% / 2) - 1em);
margin: 10px 0;
padding: 0;
width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
font-size: larger;
font-weight: bolder;
text-align: center;
}
div:hover>p{ div:hover>p{
display: block; display: block;
} }