.album{

    position: relative;

    top: 10%;

    width: 100%;

    height: 30%;

}



.gallery{

  position: absolute;

    display: inline-block;

    column-count: 3;

  

  /*Se aggiungo un attributo di altezza e imposto l'altezza dell'immagine più grande, evito la sovrapposizione*/

}



.boing {

  width: 50%;

}



.clipart img{

  border: 3px solid transparent;

  margin: 25px 10px 5px 0;

  filter: drop-shadow(5px 5px 5px #222);

  height: 3.5rem;

}



.boing:hover{

  display: inline-block;

  transform: scale(1.1,1.1);

  transition: 0.5s ease-in-out;

}



.boing img:hover{

  border: 3px solid rgb(157, 235, 157);

}



.enlarge img {

  height: fit-content;

  position: absolute;

  left: 0px;

  transition: opacity 0.25s ease-in-out;

  filter: drop-shadow(5px 5px 5px #222);

}



.boing a{

  color: black;

  text-decoration: none;

}

  

.enlarge img.top:hover {

    opacity:0;

  } /*  inserito con .css in Gallery.js



/*.clipart:hover img{

transform: scale(200%);

transition: 5.5s;

overflow: hidden;

border: 3px solid white);

}*/



.clipart div{ /*immagine allargata*/

transform:scale(1,1);

position: absolute;

background-color: white;

padding: 5px;

left: -1000px;

border: 1px dashed lightgreen;

/*visibility: hidden;*/

color: black;

text-decoration: none;

}



/*.clipart div img{ /*immagine allargata*/

/*border-width: 0;

padding: 2px;

}



.clipart:hover div{ /*immagine allargata*/

 /*   transition-delay: 0.25s;

    visibility: visible;

    top: 50%;

    left: 400%; /*posizione in cui l'immagine ingrandita dovrebbe spostarsi orizzontalmente */

   /* z-index: 1;

}*/