Estoy creando una galería de imágenes adaptativa en el que se muestran miniaturas de la imagen en cuadrados. Para ello pongo las imágenes de fondo usando background-image
y para que la imagen ocupe todo el cuadrado, uso background-size:cover
.
Esto funciona independientemente del tamaño de la imagen (las diferentes imágenes de fondo tendrán diferentes tamaños) y las imágenes se ajustan al tamaño del div contenedor sin problemas:
#gallery .squared {
height:0;
padding-top:50%;
background:#ab00ff;
position:relative;
color:white;
font-size:1.2em;
background-position:center center;
background-size:cover;
}
@media (min-width: 768px) {
#gallery .squared { padding-top:25%; }
}
@media (min-width: 992px) {
#gallery .squared { padding-top:16.66%; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="gallery" class="section container-fluid">
<div class="row">
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/people);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/300/nature);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/500/cats);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/500/300/sports);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/abstract);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/400/animals);"></div>
</div>
</section>
Ahora quiero añadir algo de animación y que cuando el usuario mueva el ratón por encima de los cuadrados la imagen de fondo crezca un poco, por ejemplo un 10%. Pero no encuentro manera de hacerlo. He intentado cambiando el valor de background-size
a 100% y en el :hover
a 110%, pero no funciona bien porque ese porcentaje es con respecto al contenedor y no al tamaño de la imagen, por lo que, aunque el efecto funciona, las imágenes apaisadas no terminan de verse bien (se ven repetidas):
#gallery .squared {
height:0;
padding-top:50%;
background:#ab00ff;
position:relative;
color:white;
font-size:1.2em;
background-position:center center;
background-size:100%;
transition:all 1s;
}
#gallery .squared:hover {
background-size:110%;
}
@media (min-width: 768px) {
#gallery .squared { padding-top:25%; }
}
@media (min-width: 992px) {
#gallery .squared { padding-top:16.66%; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="gallery" class="section container-fluid">
<div class="row">
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/people);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/300/nature);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/500/cats);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/500/300/sports);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/abstract);"></div>
<div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/400/animals);"></div>
</div>
</section>
Para evitar que se repita podría hacer algo como background-repeat: no-repeat
pero eso no es lo que quiero porque se verían espacios en blanco en algunas cuadrados.
Así que la pregunta sería: ¿Es posible hacer esto exclusivamente con HTML y CSS sin utilizar JavaScript?