Une opacité qui ne change pas lors d'un hover

Malgré une transition

Le problème exposé dans ce sujet a été résolu.

Bonjour,

Je tente de changer l’opacité d’un fond (img) lors d’un hover sur un ( pas deux :B ) bouton.

Malgré un code chopé sur le net et retravaillé par mes soins (car je pensais l’avoir compris)… rien ne se passe.

Mes CSS :

#img { padding: 0; height: auto; bottom: auto; left: 0px; margin-bottom: auto; margin-left: 0px; top: 0px; position: absolute; width: 1000px; height: 50px; ; margin-top: 20px; opacity: 0.3; -webkit-transition: all 0,3s ease; -moz-transition: all 0,3s ease; -o-transition: all 0,3s ease; -ms-transition: all 0,3s ease; transition: all 0,3s ease; }

.niveau1:hover + .niveau2 { opacity: 1;

} .img { position: fixed; overflow-x: hidden; overflow-y: visible; top: 0; left: 0; bottom: 0; right: 0; width:100%; height: 100%; background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-image: url(./images/Attention.jpg); opacity: 0.1; z-index: -1;}

}

#texte {
	vertical-align: middle;
	padding-top: 20%;
	width: 100%;
	height: 100%;
}
h1	{
	font-family: 'Lato', Calibri, Arial, sans-serif;
	text-align: center; vertical-align: middle;
	font-size: 10vw;
	line-height: 10vh;
	margin-top: 20vh;}

#button {
	vertical-align: middle;
	height: 100%;
	z-index: 2;
}

.button {
text-align: center;
height: 100%;
margin-top: 20px;
display: block;

}

et mon HTML :

<div id="header"> <div class="niveau1"> <div id="texte"> <h1>TITRE</</h1> <div id="button"> <div class="button"> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-success">Success</button></div> <div class="img"> </div> <div class="img"></div> </div> <!-- #logo --> <div id="img" class="niveau2"></div>

Suis-je loin du résultat ?

Autre question : comment effectuer ce changement d’opacité sur le :hover d’un seul bouton (Success) ?

Merci beaucoup, bon week-end,

P.

+0 -0

Divisons plutôt ta question en plusieurs étapes :

  1. Quel sélecteur peux-tu utiliser pour cibler le bouton en question ?
  2. Comment tu gères le CSS au survol ?
  3. Tu peux alors changer son opacité avec la bonne propriété

Par contre avant tout ça il faudrait t’assurer d’avoir un code valide. Actuellement je vois des accolades (côté CSS) et des chevrons (côté HTML) en trop…

N’hésite pas à valider régulièrement ton code avec les outils du W3C :

+0 -0

Salut viki53 :)

Je ne savais pas que le W3C validait aussi les CSS. Merci ;)

Pour le reste, je passe mon site régulièrement à la moulinette, mais c’est vrai je ne l’ai pas fait depuis un moment.

Pour mon soucis, j’ai en background une image d’une opacité de 0.3, et je souhaiterais qu’en survolant le boutant Success, le background affiche une opacité de 1. Et rien pour le bouton Warning. J’ai retenté pas mal de choses mais un truc m’échappe :B

Merci pour ta réponse, bonne soirée,

P.

+0 -0

Autant sur le CSS que tu as posté au début j’ai pu identifier une tentative d’interactivité (.niveau1:hover + .niveau2 { opacity: 1;}), autant sur le site en ligne je ne vois rien de tel (et opacity n’apparaît qu’une seule fois). C’est un peu dur de t’aider du coup (sans parler du fait que ton CSS n’est pas indenté correctement et donc pénible à débugger).

+0 -0

Si tu veux absolument que le bouton soit à l’intérieur de la div qui doit changer de fond, c’est effectivement pénible. J’ai trouvé une solution presque pas trop crado : mettre le conteneur en grid, ajouter une div après le bouton, qui servira à porter le background, et forcer cette div à être derrière le reste des éléments du conteneur avec grid-row et grid-column (et un z-index négatif). Ça marche, sans être abominable.

+0 -0

Et si on remplaçait la div img par un background-color sur le body ? Plus facile ou plus compliqué ?

PaulLoupSulitzer

Quand on veut modifier une propriété d’un élément A avec une interaction sur un élément B, les cas simples sont :

  • si B est parent de A
  • si A et B sont fils d’un même élément et B est avant A

Dans les autres cas, c’est pénible. C’est donc le cas si tu veux changer le background du body via un bouton qui est (nécessairement) dans le body.

Ton idée d’utiliser scale pourrait peut-être marchouiller, mais on sent bien que ça va être fragile. (Je n’ai pas regardé plus que ça.)

Démo de la technique avec grid dont je parlais tout à l’heure :

<!doctype html>
<title>Document sans nom</title>
<style>
.container{
  display:grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
}
.content {
  grid-row: 1;
  grid-column: 1;
}
.button{
  justify-self: start;
  grid-row: 2;
  grid-column: 1;
}
.curtain {
  grid-row: 1 / 3;
  grid-column: 1;
  background-color:#00000033;
  z-index: -1;
}
.button:hover + .curtain{
  background-color: transparent;
}
</style>

<div class="container">
  <div class="content">
    <h1>titre</h1>
    <p>contenu, bla bla</p>
  </div>
  <button class="button">change fond</button>
  <div class="curtain"></div>
</div>
+1 -0

Merci infiniment lxnv,

C’est le problème que j’ai avec le grid, je connais le row et le column… mais je n’arrive pas à maitriser / modifier ton code pour avoir deux boutons, et une image en mode cover margin: 0.

Comme c’était le cas dans mon exemple, la hauteur du .curtain (img) est limité à ? plutôt que d’être à 100vh. Pourquoi ?

Pourtant, ton code a l’air "simple", et le changement d’opacité fonctionne :) 

<!doctype html>
<title>Document sans nom</title>
<style>
.container
{
	display:grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto;
	width: 100%;
	height: 100%;
}

.content
{
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	height: 100%;
}

.button
{
	justify-self: start;
	grid-row: 2;
	grid-column: 1;
}

.red
{
	background-color: red;
}

.black
{
background-color:  black}

.curtain
{
	grid-row: 1;
	grid-column: 1;
	z-index: -1;
	background: url("https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.3;
	width: 100%;
	height: 100%;
}

.button:hover + .curtain
{
	opacity: 1;
}
</style>

<div class="container">
  <div class="content">
    <h1>titre</h1>
    <p>contenu, bla bla</p>
  </div>
  <button class="button red">change fond</button>  <button class="button black">ne change rien</button>


  <div class="curtain"></div>
</div>

Bonne soirée, P.

+0 -0

Ah mais tu voudrais que le changement d’opacité soit sur l’image de fond de toute la page ? Dans ce cas c’est beaucoup plus simple, pas besoin de grid, tu mets le .curtain en position:fixed avec une taille de 100vw×100vh, ça doit marcher, non ?

(Il faut que tu mettes le .curtain juste après le bouton, en revanche. Ou que tu utilises ~ à la place de +.)

+0 -0

SUPER ! :D

par contre :

<button class="button red">change fond</button><div class="curtain"></div> <button class="button black">ne change rien</button>

c’est bien ça ?

Visuellement, comme le précédent code, je n’ai qu’un btn, le black :B

Mais l’effet est là ;)

reste cette histoire de boutons.

Encore merci :)

+0 -0

C’est parce que les deux boutons sont l’un sur l’autre, puisque j’ai forcé le placement dans la grille de tous les éléments de classe button.

Il faut enlever la mise en grille (display:grid), et tant qu’à faire tout ce qui en dépend et ne sert plus à rien (justify-self, grid-*). Il n’y a même plus besoin du .container ni du .content en fait !

Je te conseille de nettoyer au max et de ne garder que ce qui est absolument nécessaire. Tout élément ou propriété CSS en plus ajoute potentiellement des problèmes à régler plus tard. Par exemple tu as tendance à mettre width:100% et height:100%, a priori en l’état actuel du CSS ça n’a pas d’effet visuel ni forcément de sens, donc autant ne pas s’encombrer.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte