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

Compare commits

base: Alype:333c7c6ae9a291d2caf6b6d1a494ecd118be56e1
Branches Tags
Alype:main
..
compare: Alype:efb50b3da073166265105c625b945287135978a7
Branches Tags
Alype:main

No commits in common. "333c7c6ae9a291d2caf6b6d1a494ecd118be56e1" and "efb50b3da073166265105c625b945287135978a7" have entirely different histories.
333c7c6ae9 ... efb50b3da0

2 changed files with 39 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<h1>Une page pour tester le dithering des images</h1> <h1>Une page pour tester le dithering des images</h1>
<p>Fortement inspiré par <a href="https://site.sarahgarcin.com/web-frugal/#images">le site "web frugal" de Sarah Garcin</a>.</p> <p>Fortement inspiré par https://site.sarahgarcin.com/web-frugal/#images</p>
<section> <section>
<div> <div>
<img src="/img/dither_interlope_logo.jpg" alt=""> <img src="/img/dither_interlope_logo.jpg" alt="">
@ -17,7 +17,7 @@
</div> </div>
<div> <div>
<img src="/img/dither_gouinementLundi_logo.jpg" alt=""> <img src="/img/dither_gouinementLundi_logo.jpg" alt="">
<p>Gouinement Lundi</p> <p>Goinement Lundi</p>
</div> </div>
<div> <div>
<img src="/img/dither_categorieTrans_logo.jpg" alt=""> <img src="/img/dither_categorieTrans_logo.jpg" alt="">

94
style.css
View file

@ -1,10 +1,18 @@
/* 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;
@ -12,11 +20,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{
@ -24,69 +32,39 @@ h1,h2,h3,h4,h5,h6{
text-decoration-color: fuchsia; 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{ img{
/* Normalize images */
display: block;
/* taille des images */
width: 300px; width: 300px;
display: block;
} }
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;
} }
/* Lors du hover de la div, afficher le paragraphe */ div{
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;
} }