@charset "utf-8";

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

   Author: Chris LaFleur
   Date: 11/19/23
*/


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: transform 2s;
}