JSFiddle - React, Tailwind, and code Playground

HTML

<div class=gift-userlist>
<input type='checkbox' id='gift-userlist-expand'>
<div>
<p><label for='gift-userlist-expand'><b>Gift lists: </b></label></p>
<label for='gift-userlist-expand' id='gift-userlist-expander'></label>
    <a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user1.svg' width="50" height="60"><figcaption>User X</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user2.svg' width="50" height="60"><figcaption>User Y</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user1.svg' width="50" height="60"><figcaption>User X</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user2.svg' width="50" height="60"><figcaption>User Y</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user1.svg' width="50" height="60"><figcaption>User X</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user2.svg' width="50" height="60"><figcaption>User Y</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user1.svg' width="50" height="60"><figcaption>User X</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user2.svg' width="50" height="60"><figcaption>User Y</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user1.svg' width="50" height="60"><figcaption>User X</figcaption></figure></a><a href="#"><figure class='iconportrait'><img src='http://www.nimbustier.net/blogs/2014/11/user2.svg' width="50" height="60"><figcaption>User Y</figcaption></figure></a><a href="#"><figure class='iconportrait'><img...

CSS

div.gift-userlist #gift-userlist-expand {
  display: none
}


figure.iconportrait {
  padding: 0;
  width:50px;
  display: inline-block;
  margin:0;
  transition-duration: 0.15s, 0.4s;
  transition-timing-function:linear;
  transition-property: transform, margin;
  padding-left: 2px;
  background-color:rgba(255,255,255,0.8);

}

figure.iconportrait figcaption {
 font-size: 8px;
 overflow: hidden;
 width:50px;
 height:1em;
 display:block;
 margin-left: 5px;
 background-color:rgba(255,255,255,0.8);
 text-align: center;
}


div.gift-userlist {
  padding-right: 50px;
}

figure.iconportrait:hover {
  margin-left: 9px;
  margin-right: 9px;
  z-index: 200;
  transform: scale(2);
}


div.gift-userlist figure.iconportrait {
  margin-left: -52px;
  z-index:0;
  border: 1px solid gray;
  padding-left: 2px;
  background-color:rgba(255,255,255,0.8);
}

div.gift-userlist  #gift-userlist-expand + div a:nth-child(3) figure.iconportrait {
  margin-left: 0;
  z-index:5;
}

div.gift-userlist  #gift-userlist-expand + div a:nth-child(4) figure.iconportrait {
  margin-left: -20px;
}

div.gift-userlist #gift-userlist-expand + div a:nth-child(5) figure.iconportrait {
  margin-left: -40px;
}

div.gift-userlist #gift-userlist-expand:checked + div a figure.iconportrait {
  margin-left: 0;
  transition-timing-function:cubic-bezier(0,-0.4,1,1.8); 
}


div.gift-userlist #gift-userlist-expand + div #gift-userlist-expander:before {
  font-size:40px;
  content:"»";
  display:block;
  float:left;
  height:60px;
  width:50px;
  text-align: center;
  border-radius: 2px;
  background-color:#08f;
  color:white;

}

div.gift-userlist #gift-userlist-expand:checked + div #gift-userlist-expander:before {
  content:"«";
}