.wrapper{width:300px;height:400px;background:#fff;margin:auto;position:relative;overflow:hidden;border-radius:10px 10px 10px 10px;box-shadow:0;transform:scale(.95);transition:box-shadow .5s,transform .5s;&:hover{transform:scale(1);box-shadow:5px 20px 30px rgba(0,0,0,.2)}.container{width:100%;height:100%;.top{height:80%;width:100%}}.top img{width:100%;height:100%}.inside{z-index:9;background:#0098da;width:140px;height:70px;position:absolute;top:0;right:-70px;border-radius:0 0 200px 200px;transition:all .5s,border-radius 2s,top 1s;overflow:hidden;.icon{position:absolute;right:55%;top:7px;color:#fff;opacity:1}&:hover{width:100%;right:0;top:0;border-radius:0;height:80%;.icon{opacity:0;right:15px;top:15px}.contents{opacity:1;transform:scale(1);transform:translateY(0)}}.contents{padding:5%;opacity:0;display:block;transform:scale(.5);transform:translateY(-200%);transition:opacity .2s,transform .8s;table{text-align:left;width:100%}h1,p,table{color:#fff}p{font-size:13px}}}}