agrandir des images au clic sourisFermé

Question

BonsoiR
ok après avoir mis ce codage (css):
p.popup {
height: 150px;
width: 200px;
}
p.popup > img {
height: 80%;
width: 80%;
cursor: pointer;
}
p.popup > img:hover {
height: auto;
width: auto;
position: relative;
border: black solid 1px;
}
code HTML:
<p class="popup"
<img src="espacedeliberte/CIMG4747e.jpg" alt="47e" />
<img src="espacedeliberte/CIMG4756e.jpg" alt="56e" />
</p>
mes images s'agrandissent au passage de la souris !OK ! seulement elles ne se suivent plus comme je l'avais souhaité au départ....elles reviennent chacune à la ligne.....
comment les mettre à la suite...multi merci si qq1 réppond!!!!
ama

infowebstudio2010 · Answer

Bonjour, vous pouvez placer un style="float:left", en general dans le code de la 1e image.
Par exemple <img src="espacedeliberte/CIMG4747e.jpg" alt="47e" style="float:left"/>

ama · Answer

ok ca fonctionne seulement j ai environ une trentaine d'images à faire suivre sur ma page de telle façon à ce que chacune d'elle ne se chevauche pas ...alors cette solution reste approximative pour que chaque image se cale correctement sur ma page
J ai trouvé une solution. c'est un peu laborieux et  c'est une solution quand même.....
je programme une class pour l emplacement de chaque image ex
.popup1> img {
   ...
   margin-left: 82%;
margin-top: -900%; 
   }
 et je peux mettre chaque image cote à cote 
bien je continue comme même si je pense qu'il solution plus simple 
dailleur si qq1 a cette solution plus simple 
mi je veux bien car sinon je ne suis pas couché!!!
merci en tous cas de ta réponse toujours encourageante
ama

bg62 · Answer

mieux vaut faire ça avec css ou javascript, car les popups sont très mal vus ....
:-)

arthezius · Answer

Sinon peut être avec z-index pour quelle passe devant les autres au lieu de les décaler...

arthezius · Answer

z-index est un attribut CSS qui permet de mettre des éléments les uns devant les autres.
Avec ça tu devrai pouvoir ton image devant quand elle s'agrandi ce qui de décalera pas les autres vu qu'elles ne seront plus dépendante du positionnement et de la taille de celle qui s'agrandit.

https://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html

infowebstudio2010 · Answer

Comme l'a dit bg62 cherchez plutot un code javascript vous permettant d'afficher une gallerie complète

Agrandir des images au clic souris

6 réponses

Discussions similaires

Newsletters