Discussion :

[maxtrident]

bonjour
je n'arrive a centrer l'image en fonction de la taille de l'écran et le sortir du parent

hmtl

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="contbasem_DG">
<table class="acha" >
	<tr>
	 <th class="acha"  >Image actuelle  pour votre article </th>
	 	 <td class="acha centre">
		<a class="loupimaj"><img src="./style/images/shop/<?php echo $logo ?>" alt="<?php echo $logo ?>" width="120" height="120" />
		<span style="background-image: url(./style/images/shop/<?php echo $logo ?>)"></span>
		</a> 
		</td>
	</tr>
</table>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.contbasem_DG {
width:100%;	
padding: 10px;
border-top: 0;
background-color:#fff;
text-align:center;
}
 
.loupimaj span {
	position:absolute; 
	height:30%;
	width:30%;
	box-shadow:0 0 2px rgba(0,0,0,.5);	 
	transform:scale(0) rotate(-12deg);
	transition:all .25s;
	opacity:0;
	background-size: cover;
    background-position: center;
}
.loupimaj:hover span, .loupimaj:focus span{
    transform:scale(1) rotate(0);  
	opacity:1;	
	cursor:none;
	z-index:2;
}

en faisant ça .loupimaj:hover span ~ .contbasem_DG = je ne vois plus l'image au passage du hover.
j'ai toujours un problème de compréhension avec le ~ ( le parent c'est bien contbasem_DG donc l'image doit être centrer par rapport à lui.)

[NoSmoking]

Bonjour,

en faisant ça .loupimaj:hover span ~ .contbasem_DG ...
j'ai toujours un problème de compréhension avec le ~

en faisant cela, tu cibles un élément ayant la class="contbasem_DG" qui est frère, mais pas forcément direct c'est le tilde ~, d'un élément <span> étant lui même contenu dans un élément ayant la class="loupimaj" lorsque ce dernier est survolé.

Je ne pense pas que cela ce que tu souhaites !

...( le parent c'est bien contbasem_DG donc l'image doit être centrer par rapport à lui.)

Cela va dépendre de ton CSS mais avec un position:absolute l'élément référent est le premier ancêtre positionné, hors static, pour la faire courte.

Au passage, je ne vois pas pourquoi tu utilises une <table> dans ton cas !!!!!


Ressources :

• Sélecteurs CSS

[maxtrident]

bonjour
Donc dans mon cas ce n'est pas possible de centrer ?
Ne trouvant pas de solution: j'ai ajouté top:10% et left:35% pour faire un semblant de centrer.
en passant en responsive: ça fait n'importe quoi.
ps: désolé mais j'ai un problème de compréhension: ancêtre positionné, hors static, parent, frere il n'y a pas un site qui parle de tout ça avec des exemples.

[NoSmoking]

Donc dans mon cas ce n'est pas possible de centrer ?

mais bien sûr que si !

Ne trouvant pas de solution: j'ai ajouté top:10% et left:35% pour faire un semblant de centrer.
en passant en responsive: ça fait n'importe quoi.

c'était couru d'avance avec des emplâtres

ps: désolé mais j'ai un problème de compréhension: ancêtre positionné, hors static, parent, frere il n'y a pas un site qui parle de tout ça avec des exemples.

Il te faut (re)voir les bases du CSS/HTML concernant l'arborescence du DOM, et donc de ses termes, pour cela tu peux regarder : Apprendre le développement web sur MDN, il n'y a rien de bien compliqué au départ.

Pour en revenir à ta préoccupation je te propose cette approche sur base du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<figure>
  <figcaption>
    Image actuelle  pour votre article
  </figcaption>
  <a class="loupimaj">
    <img src="source-de-ton-image" alt="" width="120" height="120"/>
    <span style="background-image: url(source-de-ton-image"></span>
  </a>
</figure>

... et l'application du CSS ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
figure {
  position: relative;           /* pour servir de référent */
  text-align: center;
}
figcaption {
  font-weight: 700;
}
figure .loupimaj span {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: auto;
  opacity: 0;
  background-position: center;      /* pas utile si cover */
  background-size: cover;
  box-shadow: 0 0 2px rgba(0,0,0,.5);
  transition: all .25s;
  transform: scale(0) rotate(-30deg);
  cursor: none;
  translate: -50% -50%;       /*  c'est indépendant de la transformation */
  aspect-ratio: 1;
}
figure .loupimaj:hover span,
figure .loupimaj:focus span {
  opacity: 1;
  transform: scale(1) rotate(0);
}

Si j'ai bien compris ton souci, c'est une façon d'y arriver.

Tu auras surement des questions mais il ne faut pas perdre de vue la curiosité fait également partie de l'apprentissage !

[maxtrident]

bonjour
merci pour ton script mais ne fonctionne pas dans un tableau quand tu change de format écran smartphone, la photo est en bas.

quand tu scrool la page vers le bas: la photo se positionne en haut, même en changeant la position:absolute avec fixed ou sticky...je ne pense pas qu'on peut faire ça avec du background-position.

je vais essayer sans background-image.