Foro de elhacker.net

Pues bien, el problema es que tengo un div con imágenes a tamaño 80x80px, a las que aplico la siguiente transición:

.galleryPhoto
{
  transition: transform 1s ease-in-out 0.1s;
  margin: 5px;
}
 
.galleryPhoto:hover
{
  transform: scale(3);
}
 

La idea es crear una especie de galería con miniaturas, de forma que al pasar el ratón por una imagen se haga más grande.

Pero este div está dentro de una section, y al ampliarse las fotos, estas aparecen cortadas en el límite de la section. Esto no sucede si le pongo la propiedad overflow como visible a la sección, pero quiero que esté en auto para poder poner texto y que aparezcan barras de desplazamiento en caso de necesidad (lo cual es más que probable).

Saludos.

Usa otro contenedor mas  :P

Saludos

Perdona, ¿puedes precisar eso un poco más?

Posiblemente el contenedor que esta encima de esta galeria no te permite agrandar demasiado la imagen y por esa razon te la corta...

Una solucion que encontre en su momento es jugar con % de la imagen y del margin...

si tengo una imagen de ancho 50% y le pongo un margin de 5% por lado podria escalar la imagen a 1.2 sin problemas... ya que al agrandarse tomaria un ancho de 60%... que es el total inicial, de esta forma me garantizaria que siempre sea visible

Si tenes dudas con el ejemplo avisame y seguimos aclarando...

Suerte!

El caso es que estas imágenes se agrandan al 300% de su tamaño. Y sí, lo que pasa es que el contenedor inmediatamente superior limita el tamaño de la imagen.

Lo que yo quiero es permitir que las imágenes sean escaladas y el overflow se vea por fuera del contenedor, pero no puedo renunciar a las barras de desplazamiento.

Al final he renunciado a las barras de desplazamiento y le he puesto la altura a auto, para que se adapte al tamaño del contenido.