@charset "utf-8";

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

   Author:   Matt Johnson
   Date:     11/23/24
   Filename: code8-2_trans.css

*/


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

}

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

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

}

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

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);

}

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



#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#fig1,
figure:hover#fig2,
figure:hover#fig3,
figure:hover#fig4,
figure:hover#fig5,
figure:hover#fig6 {
   transform: rotate(0deg);
   transition: transform 2s;
}