JSFiddle - React, Tailwind, and code Playground

by emanuele45

HTML

<div id="slideout">
    <img id="image" src="http://adminforum.in/uploads/profile/photo-thumb-2.png?_r=1409535066" />
    <div id="slideout_inner">
        <ul>
            <li>Hidden Content</li>
        </ul>
    </div>
</div>

CSS

#slideout {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    display: block;
}
#image {
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
#slideout_inner ul li {
    width: 0;
    height: 0;
    display: block;
}
#slideout_inner {
    position: absolute;
    top: 0px;
    right: -100px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
#slideout:hover #image {
    left: 100px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}
#slideout:hover #slideout_inner {
    left: 0px;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}