Mauvaise stabilité des images sur Hover effect

Question

gpazzi

3 Sep 2018 à 21:31

Bonjour,
Je cherche de l'aide pour stabiliser un script qui fonctionne mais qui ne donne pas un résultat fluide.
Le script ci-dessous fonctionne mais les 6 images ne sont pas stables lors du déplacement de ma souris (plus spécifiquement la sixième image). Celles-ci s'intervertissent ou un carré noir remplace l'image (ça ressemble à un problème de chargement des images qui n'est pas fluide). Quelqu'un peut-il m'aider ?
Merci d'avance.


<div class="container">	
	<div class="row justify-content-center">
		<div class="col-md-18">
			<div class="row justify-content-center">
					
						<div class="col-md-4">
							<div class="effect2">
								<div class="image">
									<img class="img-fluid" src="img/image1.jpg" alt"">
									<div class="mask text-center">
										
										<h4>LIGNE 1</h4>
											<h5>PRIX</h5>
											<h5><i class="fa fa-clock-o" aria-hidden="true"></i> 45min.</h5>
										
												<p>- texte explicatif</p>
												<p>- texte explicatif</p><br/>
												
									<div class="order_button">			
										<a href="ligne1.php">RDV !</a>
									</div>
									
									</div>
								</div>
							</div>
						</div>
						
						<div class="col-md-4">
							<div class="effect2">
								<div class="image">
									<img class="img-fluid" src="img/image2.jpg" alt"">
									<div class="mask text-center">
										
										<h4>LIGNE 2</h4>
											<h5>PRIX</h5>
											<h5><i class="fa fa-clock-o" aria-hidden="true"></i> 45min.</h5>
											
												<p>- texte explicatif</p>
												<p>- texte explicatif</p><br/>
										
									<div class="order_button">	
										<a href="ligne2.php"> RDV !</a>
									</div>
									
									</div>
								</div>
							</div>
						</div>
						
						<div class="col-md-4">
							<div class="effect2">
								<div class="image">
									<img class="img-fluid" src="img/image3.jpg" alt"">
									<div class="mask text-center">
										
										<h4>LIGNE 3</h4>
											<h5>PRIX</h5>
											<h5><i class="fa fa-clock-o" aria-hidden="true"></i> 45 min.</h5>
											
												<p>- texte explicatif</p>
												<p>- texte explicatif</p><br/>
											
									<div class="order_button">	
										<a href="ligne3.php"> RDV !</a>
									</div>
									
									</div>
								</div>
							</div>
						</div>
						
						<div class="col-md-4">
							<div class="effect2">
								<div class="image">
									<img class="img-fluid" src="img/image4.jpg" alt"">
									<div class="mask text-center">
										
										<h4>LIGNE 4</h4>
											<h5>PRIX</h5>
											<h5><i class="fa fa-clock-o" aria-hidden="true"></i> 45 min.</h5>
												<p>- texte explicatif</p>
												<p>- texte explicatif</p><br/>
											
									<div class="order_button">	
										<a href="ligne4.php"> RDV !</a>
									</div>
									
									</div>
								</div>
							</div>
						</div>
						
						<div class="col-md-4">
							<div class="effect2">
								<div class="image">
									<img class="img-fluid" src="img/image5.jpg" alt"">
									<div class="mask text-center">
										
										<h4>LIGNE 5</h4>
											<h5>PRIX</h5>
											<h5><i class="fa fa-clock-o" aria-hidden="true"></i> 45min.</h5>
												<p>- texte explicatif</p>
												<p>- texte explicatif</p>

									<div class="order_button">	
										<a href="ligne5.php"> RDV !</a>
									</div>
									
									</div>
								</div>
							</div>
						</div>
						
						<div class="col-md-4">
							<div class="effect2">
								<div class="image">
									<img class="img-fluid" src="img/image6.jpg" alt"">
									<div class="mask text-center">
										
										<h4>LIGNE 6</h4>
											<h5>PRIX</h5>
											<h5><i class="fa fa-clock-o" aria-hidden="true"></i> 45min.</h5>
												<p>- texte explicatif</p>
												<p>- texte explicatif</p><br/>
												
									<div class="order_button">	
										<a href="ligne6.php"> RDV !</a>
									</div>
							
									</div>
								</div>
							</div>
						</div>
				</div>
			</div>
		</div>
	</div>



img.btn_close
	{
    float: right;
    margin: -55px -55px 0 0;
	}

	
.text
	{
	margin-top:25px;
	color:#00FFFF;
	}

.text h3
	{
	font-weight:bold;
	}	
	
.order_button a
	{
	color:#fff;
	padding: 8px 15px;
	border-radius:20px;
	background-color: #ffa500;
	}
	
	
.order_button a:hover
	{
	color:#fff;
	text-decoration:none;
	}

	
.img
	{
	position:relative;
	transition:all 0.4s;
	}
		
	
.image
	{
	position:relative;
	margin-top:25px;
	overflow:hidden;
	}
	
	
.mask
	{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	}
	
	
.mask, .mask a, .mask p, .mask h4
	{
	transition:all 0.4s;
	}
	
	
.mask h4
	{
	padding:10px 0;
	color: #fff;
	font-weight:bold;
	}
	
	
.mask p
	{
	color: #404040;
	text-align: left;
	margin-left:25px;
	line-height:4px; 
	font-size:14px;
	}
	
	
.effect2 .mask
	{
	background-color: rgba(0, 255, 255, 0.7);
	opacity:0;
	visibility:hidden;
	}
	
	
.effect2:hover .mask
	{
	opacity:1;
	visibility:visible;
	}
	
	
.effect2 h4
	{
	background-color: rgba(255, 165, 0, 1);
	top:-20px;
	opacity:1;
	visibility:hidden;
	}
	
	
.effect2:hover h4
	{
	top:0px;
	opacity:1;
	visibility:visible;
	}
	
	
.effect2 p
	{
	top:50px;
	opacity:0;
	visibility:hidden;
	}


.effect2:hover p
	{
	top:0;
	opacity:1;
	visibility:visible;
	}
	
	
.effect2 img
	{
	transform:scale(1);
	}	
	
	
.effect2 img
	{
	transform:scale(1.2);
	}

Modifié par gpazzi (03 Sep 2018 - 21:33)

Soldat8889

3 Sep 2018 à 22:27

Aurais-tu un lien s'il te plaît ?

gpazzi

5 Sep 2018 à 01:45

Nom désolé Soldat8889, je n'ai pas de lien. Merci pour ta considération.

gcyrillus

Modérateur

5 Sep 2018 à 10:24

Tu peut te servir d'un outil en ligne pour partager une demo du code avec lequel tu as un soucis.

par exemple en reprenant ton code avec des images de 100x100 : https://codepen.io/anon/pen/KxqOoG

Tu peut reprendre à ton compte et mettre à jour cette démo .

image neutre generer à partit de dummyimage.com

Cdt

gpazzi

7 Sep 2018 à 02:35

Salut gcyrillus et merci pour cette proposition que je vais regarder et mettre en place.

En attendant, je viens de réaliser que le changement de classe de col-md-4 à col-md-3 éliminait mon problème de stabilité (en diminuant les images).
<div class="col-md-4"> à <div class="col-md-3">
Le résultat final n'est pas acceptable mais le fonctionnement des animations est stable et fluide.

Encore merci pour ton intérêt gcyrillus.

gpazzi

7 Sep 2018 à 02:55

Je viens de réaliser qu'en changeant le 3eme DIV :

<div class="col-md-18">
Pour
<div class="col-md-16">

La stabilité des images revient...

Sujet clos

CSS et mise en forme, CSS3

Mauvaise stabilité des images sur Hover effect