/* An element with two children. The second is hidden until the first
is hovered, after which case it pops up centered in the slide. */
.details > :nth-child(2) {display: none; position: absolute; top: 50%;
  left: 50%; transform: translate(-50%,-50%); z-index: 1;
  box-shadow: 0em 0.3em 1.2em #333}
.details:hover > :nth-child(2) {display: block}
.details >:nth-child(1)::after {content: "\2B52\2606" /*\2728*/; color: #005A9C;
  position: absolute; -webkit-animation: rotate 4s infinite linear;
  animation: rotate 4s infinite linear}

@keyframes rotate {
  from {transform: rotate(0)}
  to {transform: rotate(360deg)}
}
@-webkit-keyframes rotate {
  from {transform: rotate(0)}
  to {transform: rotate(360deg)}
}