Rectangle transparent sur image html-css

Bonsoir,

La solution se trouve dans ton code.
Peux-tu nous joindre ton code html?
En première idée je suggèrerais de rajouter une <div> pour ton bouton, afin de restreindre l'effet de roll-over au bouton ?

Bonjour,

Voilà mon code :

<sectionclass="portfolio">

<divclass="title-portfolio">Portfolio</div>

<pictureclass="image-portfolio">

<imgsrc="img/portfolio.jpg"alt="portfolio">

</picture>

<buttonclass="bouton-rouge">Regarder</button>

</section>

.portfolio{

margin-top: 20px;

padding: 10px10px10px10px;

box-shadow: 1px4px4px4px#aaa;

}

.title-portfolio{

background-color: var(--rouge);

width: 90px;

padding: 2px2px2px2px;

color: white;

font-family: 'BenchNine', sans-serif;

font-size: 1.5em;

margin-bottom: 20px;

text-align: center;

}

.title-portfolio:hover{

color:#999;

}

.image-portfolio:hover{

opacity: 0.25;

}

.bouton-rouge{

background-color: var(--rouge);

font-family: 'BenchNine', sans-serif;

font-size: 1.5em;

color: white;

}

.bouton-rouge:hover{

background-color : rgba(0,0,0,0.71);

}

Bonjour,

dans ton fichier CSS,
.image-portfolio:hover {
      opacity:0.25;
}

Donc c'est normal que toute ton image se grise.

Pour résoudre ce souci tu pourrais créer une <div> comme j'ai eu l'occasion de suggérer dans mon post précédent.
Par contre j'avais mal compris ta demande (je pensais que tu souhaitais n'impacter que le bouton rouge, alors qu'en fait la zone concernée est plus vaste. Pas de grosse différence dans la pratique :
→ création d'une div
→ attribution à cette div une classe à laquelle tu ajoutes plusieurs paramètres dans le fichier CSS:
- ses dimensions (longueur / largeur / coordonnées et positionnement par-rapport aux autres div)
- la couleur d'arrière-plan: transparent en temps normal, grisé quand 'hover' il y a (si j'ai bien compris?) .
Tu devras probablement ajouter un z-index pour avoir l'image d'arrière-plan bien derrière, le filtre rectangulaire au milieu puis le bouton devant (donc ce paramètre doit être ajouté pour ces 3 éléments _ + probablement repositionner le bouton par-rapport aux autres div).

enfin, désactiver le 'hover' de l'image puisque ce n'est pas ce que tu veux.
Est-ce que ça te paraît cohérent?