28172 sujets

CSS et mise en forme, CSS3

Css3 scale centré

Bonjour

J'ai suivi ce tutorial pour faire une lightbox rien qu'en css3, fait par Raphael Goetter :

http://www.creativejuiz.fr/blog/les-tutoriels/effet-lightbox-en-css3-grace-a-transition

Le seul problème qui n'en est pas un, c'est lorsque je focus, agrandis les images, elles ne viennent pas au centre de l'écran. Et je ne vois pas comment faire.

Voila ma page qui est en construction :

http://www.raiseurmind.com/raiseurmind/?page=raiseurblog

voila le code css qui est le meme que celui du tutorial a quelques valeurs près.



    #slideshow figure {  
        position: relative;  
        float: left;  
        margin: 10px 10px;  
        z-index: 100;  
        width: 150px;  
        background: #fff;  
        border: 5px solid #fff;  
        -webkit-border-radius: 8px;  
        -moz-border-radius: 8px;  
        border-radius: 8px;  
        -webkit-box-shadow: 0 3px 10px #ccc;  
        -moz-box-shadow: 0 3px 10px #ccc;  
        box-shadow: 0 3px 10px #ccc;  
        -webkit-transition: all 0.7s ease;  
        -moz-transition: all 1s ease;  
        -o-transition: all 1s ease;  
        transition: all 1s ease;  
    }  
    #slideshow figure img {  
        width: 100%;  
    }  
    #slideshow figcaption {  
        font-family: verdana, arial, sans-serif;  
        font-size: 0.7em;  
        text-align: center;  
        color: #5d7885;  
        background: #fff;  
    }  
    /*actions*/  
    #slideshow figure:focus {  
        outline: none;  
        z-index: 200;  
        margin-top: 100px;  
        -webkit-transform: scale(1.8);  
        -moz-transform: scale(3);  
        -o-transform: scale(1.8);  
        transform: scale(1.8);  
		
        -webkit-box-shadow: 0 3px 10px #333;  
        -moz-box-shadow: 0 3px 10px #333;  
        box-shadow: 0 3px 10px #333;  
    }  
    #slideshow figure:focus+span {  
        position: absolute;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background: #000;  
        z-index: 150;  
        -moz-opacity: 0.6;  
        -webkit-opacity: 0.6;  
        opacity: 0.6;  
    }  



	<div id="corps_blog">
		<section id="slideshow">
		    <figure tabindex="0">  
       <img src="img/portfolio/tpr/tpr_m01.jpg" alt="Demo" />  
       <figcaption>yo</figcaption>  
    </figure>  
    <span></span>  
    <figure tabindex="0">  
       <img src="img/portfolio/tpr/tpr_m03.jpg" alt="Demo" />  
       <figcaption>encore yo</figcaption>  
    </figure>  
    <span></span>  
    <figure tabindex="0">  
       <img src="img/portfolio/tpr/tpr_m02.jpg" alt="Demo" />  
       <figcaption>toujours yo</figcaption>  
    </figure>  
    <span></span>  
	</section>
	
	
	
			</div>
	</div>



Pourrais je savoir comment je peux faire pour que l'image s'agrandisse au centre de l'écran.


Merci pour les réponses
Modifié par huyenlong (07 Dec 2011 - 15:12)
Bonjour,

essaies quelque chose comme ça :
  #slideshow figure:focus {  
        margin: 100px auto 0;  
    }


Pas sûr que ça fonctionne mais c'est la méthode basique pour centrer des éléments. Sinon tu devrais t'intéresser à cette page et éventuellement à celle-ci aussi.

Bon courage !
Merci, je n'avais pas testé ta méthode, qui ne marche pas Smiley smile . Mais j'avais déjà regardé les autres solution sur ce site, ca ne marchait pas non plus. Donc j'ai pensé que c'est le scale qui bloque le déplacement de la cellule.

Merci pour l'aide.
Modifié par huyenlong (07 Dec 2011 - 16:01)
Hmm en effet j'avais espéré mais non !

En fait ton agrandissement est dissocié du positionnement, c'est un peu délicat. As-tu essayé de mettre :
 #slideshow figure:focus { position:absolute; left:50%; }
?

Il se pourrait que ça fonctionne..
AIE, ca , ne marche pas non plus. ca me décale tout sur la droite. Il doit y avoir un moyen de faire un scale et en même temps que ça se centre avec une transition.
Sujet clos
Aller à