/* See more of this tutorial at:  
   https://designshack.net/articles/css/joshuajohnson-2
*/


 
/* Basic CSS layout. Nothing new except maybe overflow, 
   which means extra image size truncated */
.practicePic {
  border: 4px solid darkcyan;  
  float: left;
  height: 200px;
  width: 200px;
  margin: 0 20px 20px 0px;
  overflow: hidden;
  box-shadow: 5px 5px 5px #111;  
}

/* Transition: changes values smoothly over a specified time */
.morph {
   transition: all 0.5s ease; /*shortcut for property, duration and timing */
}
 
.morph:hover {
  border-radius: 50%;
  transform: rotate(360deg);
  background: yellow; 
  /* Try multiple transformations below: 
	 transform: scale(3)  rotate(360deg); 
  */
}