28172 sujets

CSS et mise en forme, CSS3

Une transition qui se lance et reste au click:

Bonjour,

J'aimerai agrandir une div grâce aux transitions CSS3, sur mon site la transition s'effectue au clic mais uniquement lorsque je reste avec le clic activé, une fois relâchée la transition redevient à son point de départ.

La structure HTML: 
<section class="blur">	
					 <img class="flou" src="images/cabrito.png" alt="Cabrito-Serif" title="Cabrito" />
						 <p> 
							<strong> CABRITO - </strong> Serif 
						 </p>		    
						 <div class="icones">
				         	<img src="images/remove.png" alt="Remove"  class="logo" />	
				         	<img src="images/share.png" alt="Share" class="logo" />	
				        	<img src="images/star.png" alt="Star" class="logo" />	     
				    	</div>
				</section>

J'aimerai que la transition s'effectue lorsque l'on clic sur l'image.

et la partie CSS:

.blur p {
	padding-left: 5px;
	margin:5px;
	}

.blur
{
	display: block;
	width: 350px; /*Largeur de la div, égale à celle de la photo **/
	height: 215px; /* hauteur de ma div, plus grande que celle de l'image pour y placer le titre*/	
	-webkit-box-shadow: 1px -2px 30px 2px #A3A3A3;
	box-shadow: 1px -2px 30px 2px #A3A3A3;	/* Ombre de la div */
	padding-bottom: 10px;
	display: inline-block; /* Aligne l'ensemble des typographies */
	margin: 7px;
	margin-top: 20px;
	background-color: #fffffd;   /* pour placer ta section ou tu veux rajoute ça après l'avoir défini en "block" */
     
   /* Tansition de type linear durent 400 ms et qui transitionne tout (all)*/
    -webkit-transition: all 400ms linear;
	-moz-transition: all 400ms linear;
	-ms-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	transition: all 400ms linear;
}

.icones
{
	position: absolute;
    right: 20px;		/* positionnement en haut à droite (par rapport à la bordure du haut et celle de droite de la "section")*/
    height: 4px;		/* dimensions du rectangle "div" qui contiendra les 3 logos */
    width : 6px;
} 

.logo
{
    width: 200%;
    opacity: 0;	
    /* pour que l'apparition soit progressive */
    -webkit-transition-delay: 0.5s;
    -webkit-transition: 0.5s opacity;
   -moz-transition-delay: 0.5s;
   -moz-transition: 0.5s opacity;
    transition-delay: 0.5s;
    transition: 0.5s opacity;
}

/* et là pour faire apparaitre   */
.blur:hover .logo
{
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -webkit-transition: 0.5s opacity;
   -moz-transition-delay: 0.5s;
   -moz-transition: 0.5s opacity;
   transition-delay: 0.5s;
   transition: 0.5s opacity;
}

img.flou {
	width: 350px;
	height: 190px;
	cursor: pointer;
}

img.flou:hover  {
	filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);	/*********** Floute l'image au survol***********/
   -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

img.flou:active {
	filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);	/*********** Défloute l'image au survol***********/
   -o-filter: blur(0px);
    -ms-filter: blur(0px);
}

.blur:active  {
	width: 97%;
    background-color: #212628;	/*Déclenche la transition */
    color: white;
    padding: 10px;
    padding-bottom: 15%;
}

J'ai essayé avec :focus mais ça ne marche pas..
Quelqu'un a une idée?
Pour donner l'impression qu'une animation se fige en repassant à son état initial, tu dois lui appliquer une durée de transition très longue ou un délai très long.

Exemple basique:
div {width:10%; transition:9999s 0.5s;}
div:hover {width:80%;transition:0.5s;}

Le div fait 10% de largeur par défaut.
Tu le survol, il passe a 80% de largeur en une demie seconde.
Tu ne le survol plus, il lui faudra 9999 secondes pour revenir à sa taille initiale , autant dire le temps d'une vie sur une page web Smiley smile
exemple avec ton code : http://jsfiddle.net/GCyrillus/T4uY6/


Pour le javascript et l'ajout d'une classe, cela te seras utile pour assurer la compatibilité avec tous les navigateurs
Modifié par gc-nomade (13 Jun 2014 - 18:45)
Le truc c'est que je veux que cette div ce ferme sur commande...
Donc je vais opter pour le Javascript sauf que je n'y connais absolument rien, donc est-ce que tu peux me donner des axes de recherches où me proposer un petit tuto s'il te plait?
Sujet clos
Aller à