<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 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> </div>
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:"«"; }