@charset "utf-8";

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

   Author:   Alyssa Milinkovich
   Date:     11/14/2023
   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) grayscale(0);
	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;
}