Eu estou tentando alcançar omesmo efeito aqui então, quando você passa o mouse sobre a div, ela se desdobra e mostra o conteúdo, mas não consigo descobrir como fazer isso.

Até agora, sou capaz de inserir o conteúdo usando o código a seguir. Código abaixo ejsfiddle pode ser visto aqui.

html

<div class="artist artist-1"></div>
<div id="artist-text">Hi there</div>

css

.artist-1:hover + #artist-text {
  display: block;
}

#artist-text {
  display: none;
  background-color: #000000;
  width: 130px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 60%;
  animation-duration: 1s;
  animation-name: slideLeft;
}

.artist {
  height: 100px;
  width: 100px;
}

.artist-1 {
  background-color: red;
  position: absolute;
  left: 20%;
  top: 40%;
}

@keyframes slideLeft {
  from {
    margin-left: 100%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}