2

Hola tengo un ejemplo de galería de imágenes hecha con css y quería que al pasar el ratón se hicieran el doble de grandes de lo que se hacen ahora. No se si sera posible con css o tendré que usar javascript. He buscado ejemplos pero no se como realizarlo. Este es el código que tengo hasta ahora. Gracias.

            section{
                width:100%;
                margin:0 auto;
            }
	
            #container:after {
                content: " ";
                display: block;
                height: 0;
                clear: both;
            }

            #container{
                width: 90%;
                margin:0 auto;
            }

            #container div{
                width: 28%;
                height: auto;
                -webkit-transition: -webkit-transform 1s;
                display:inline;
                float:left;
                margin:0px 3% 0 0;
				padding: 0;
            }
            #container div img{
                width: 100%;
                height: auto;
                box-shadow: 0 0 10px #666;
                border: 5px solid #FFF
            }
			
            #container div img ~ span{
                width: 100%;
                display:block;
                opacity:0;
                -webkit-transition: opacity 1s;
                margin: 0;
                padding:2px 5px;
                color:#FFF;
                background:rgba(0, 0, 0, 0.7);
				box-shadow: 0 0 10px #666;
                text-align:center;
            }

            #container div img:hover + span{
                opacity:1;
            }
			
			#container:hover div{
				opacity: 0.2;
				-webkit-transform: scale(0.7);
				-ms-transform: scale(0.7);
				transform: scale(0.7);
            }
			
			#container:hover div:hover{
			  opacity: 1;
			  -webkit-transform: scale(1);
			  -ms-transform: scale(1);
			  transform: scale(1);
            }

            @media (min-width:1600px){
                #container div{
                    width: 15%;
                }
            }
<body>
        <section>
            <div id="container">
                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="img/petyr-baelish.jpg"/>
                    <span>Petyr Baelish</span>
                </div>


            </div>
        </section>
    </body>
</html>

1 respuesta 1

3

No sé si he entendido bien tu pregunta del todo pero bajando la escala podrás hacer que tus imágenes por defecto se vean más pequeñas cuando pases el ratón por encima de la galería y dará la sensación de ser más grandes al pasar por encima de ellas.

Por ejemplo poniendo una escala de 0.5 (la mitad del resultado final) quedaría así:

section{
                width:100%;
                margin:0 auto;
            }
	
            #container:after {
                content: " ";
                display: block;
                height: 0;
                clear: both;
            }

            #container{
                width: 90%;
                margin:0 auto;
            }

            #container div{
                width: 28%;
                height: auto;
                -webkit-transition: -webkit-transform 1s;
                display:inline;
                float:left;
                margin:0px 3% 0 0;
				padding: 0;
            }
            #container div img{
                width: 100%;
                height: auto;
                box-shadow: 0 0 10px #666;
                border: 5px solid #FFF
            }
			
            #container div img ~ span{
                width: 100%;
                display:block;
                opacity:0;
                -webkit-transition: opacity 1s;
                margin: 0;
                padding:2px 5px;
                color:#FFF;
                background:rgba(0, 0, 0, 0.7);
				box-shadow: 0 0 10px #666;
                text-align:center;
            }

            #container div img:hover + span{
                opacity:1;
            }
			
			#container:hover div{
				opacity: 0.2;
				-webkit-transform: scale(0.5);
				-ms-transform: scale(0.5);
				transform: scale(0.5);
            }
			
			#container:hover div:hover{
			  opacity: 1;
			  -webkit-transform: scale(1);
			  -ms-transform: scale(1);
			  transform: scale(1);
            }

            @media (min-width:1600px){
                #container div{
                    width: 15%;
                }
            }
<body>
        <section>
            <div id="container">
                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="img/petyr-baelish.jpg"/>
                    <span>Petyr Baelish</span>
                </div>


            </div>
        </section>
    </body>
</html>

Otra opción sería que si quisieras que tuviera el doble de lo que tienen actualmente (0.7) podrías modificar la escala a la que se muestra el resultado final al doble (1.4):

section{
                width:100%;
                margin:0 auto;
            }
	
            #container:after {
                content: " ";
                display: block;
                height: 0;
                clear: both;
            }

            #container{
                width: 90%;
                margin:0 auto;
            }

            #container div{
                width: 28%;
                height: auto;
                -webkit-transition: -webkit-transform 1s;
                display:inline;
                float:left;
                margin:0px 3% 0 0;
				padding: 0;
            }
            #container div img{
                width: 100%;
                height: auto;
                box-shadow: 0 0 10px #666;
                border: 5px solid #FFF
            }
			
            #container div img ~ span{
                width: 100%;
                display:block;
                opacity:0;
                -webkit-transition: opacity 1s;
                margin: 0;
                padding:2px 5px;
                color:#FFF;
                background:rgba(0, 0, 0, 0.7);
				box-shadow: 0 0 10px #666;
                text-align:center;
            }

            #container div img:hover + span{
                opacity:1;
            }
			
			#container:hover div{
				opacity: 0.2;
				-webkit-transform: scale(0.7);
				-ms-transform: scale(0.7);
				transform: scale(0.7);
            }
			
			#container:hover div:hover{
			  opacity: 1;
			  -webkit-transform: scale(1.4);
			  -ms-transform: scale(1.4);
			  transform: scale(1.4);
            }

            @media (min-width:1600px){
                #container div{
                    width: 15%;
                }
            }
<body>
        <section>
            <div id="container">
                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="http://i68.tinypic.com/67qtxs.jpg"/>
                    <span>Buena idea</span>
                </div>

                <div>
                    <img src="img/petyr-baelish.jpg"/>
                    <span>Petyr Baelish</span>
                </div>


            </div>
        </section>
    </body>
</html>

1
  • Esa era la idea @Francisco Romero , la segunda opción me gusta mas. Ahora la daré por buena, de momento no me deja. Dejo para otra pregunta otra duda de como quitar el opacy que se forma al pasar el ratón. Gracias el 14 feb. 2018 a las 22:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.