26907 sujets

CSS et mise en forme, CSS3

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)
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
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.
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...