opacity qui ne fonctionnement pas

Sujet résolu

21 juillet 2023 à 8:58:47

Bonjour,

sur le code qui suit, mon effet d'opacité ne fonctionne pas, je n'arrive pas à trouver mon erreur, je veux que le carde vert disparaisse pour laisser place à l'image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contain">
        <button class="btn">Apparais</button>
        <div class="black"></div>
        <img src="Image/istockphoto-1322277517-612x612.jpg" alt="image opacity" class="img">
        
    </div>
</body>
</html>

et le code Scss:

$border-rad: 2rem;

$clr-primary: #15DEA5;

@mixin pseudo-elem {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.btn {
    border-radius: $border-rad;
    background-color: $clr-primary;
    position: relative;
    z-index: 1;
    &:hover {
        &::after {
            opacity: 1;
        }
        & + .black {
                    opacity: 0;
                }
            }
        }
        &::after {
        @include pseudo-elem;
        background: radial-gradient(circle, lighten($clr-primary, 5) 0%, darken($clr-primary, 10) 100%);
        opacity: 0;
        z-index: -1;
        transition: opacity 250ms;
    }

.black {
        position: absolute;
        top: 8px;
        left: 81px;
        width: 612px;
        height: 407px;
       background: $clr-primary;
       z-index: 1;
       opacity: 1;
   }
.img {
    z-index: -1;
    
}

merci par avance pour ceux qui prendront le temps de lire mon poste.

Lamecarlate

21 juillet 2023 à 9:12:30

Bonjour,

réindente bien ton code, tu vas comprendre le problème Quel est ton éditeur de texte ? Ça devrait pouvoir se faire automatiquement.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ArthurGonzalez3

24 juillet 2023 à 8:52:14

Bonjour,

j'utilise Vs code.

ça fonctionne maintenant merci !

En effet le ::after était perdu entre 0 et 1 sur l'opacity il savais plus quoi faire ah ah!

AbcAbc6

24 juillet 2023 à 9:31:05

ArthurGonzalez3 a écrit:

ça fonctionne maintenant merci !

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e

ArthurGonzalez3

24 juillet 2023 à 17:30:45

AbcAbc6 a écrit:

ArthurGonzalez3 a écrit:

ça fonctionne maintenant merci !

Bonjour,

Sujet résolu
Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e

c'est fait merci