@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 8
   Coding Challenge 2

   Author:   Lucas Schiele
   Date:     11/25/2024
   Filename: code8-2_trans.css

*/


figure {
   display: block;
   width: 150px;
   position: absolute;
   z-index: 1;
   cursor: pointer;
}

figure img {
   display: block;
   width: 100%;
   filter: drop-shadow(3px 3px 10px black) grayscale(1);
   width: 150px;
}

figure figcaption {
   font-size: 0px;
   text-align: center;
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
   background-color: rgba(255, 255, 255, 0.7);
}


#fig1 {
   top: 0px; left: 0px;
   transform: rotate(-30deg)
}

#fig2 {
   top: 0px; left: 180px;
   transform: rotate(30deg)
}

#fig3 {
   top: 0px; left: 350px;
   transform: rotate(-40deg)
}

#fig4 {
   top: 200px; left: 0px;
   transform: rotate(20deg)
}

#fig5 {
   top: 220px; left: 200px;
   transform: rotate(-30deg)
}

#fig6 {
   top: 210px; left: 400px;
   transform: rotate(30deg)
}

figure:hover {
    width: 400px;
    z-index: 2;
    transition: width 2s;
}

figure:hover img {
    width: 100%;
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5)) grayscale(100%);
    transition: filter 2s;
}

figure:hover figcaption {
    font-size: 1.2em;
    transition: font-size 2s;
}

#fig1:hover, #fig2:hover, #fig3:hover, #fig4:hover, #fig5:hover, #fig6:hover {
    transform: rotate(0deg);
    transition: all 2s;
}