• HTML
• CSS
• JS

HTML

<h1>Haz click en la carita feliz</h1>
<div class="contenedor inactivo">
    <div class="cont-icono">
        <i class="icon-smile"></i>
    </div>
    <div class="cont-imagen">
        <img src="https://compositu.com/template/web/img/extra/modal_2.png" alt="">
    </div>
</div>

CSS

body{
    font-family:arial;
}
.contenedor{
    width:400px;
    border:1px solid #bdc3c7;
    position:fixed;
    top:100px;
    right:-402px;
    transition:0.3s all;
}
.cont-icono{
    width:100px;
    height:65px;
    background:#e74c3c;
    text-align:right;
    cursor:pointer;
    
    position:absolute;
    top:15px;
    left:-20px;
    transition:0.3s all;
}
.contenedor.inactivo>.cont-icono:hover{
    margin-left:-40px;
}
.contenedor.activo>.cont-icono{
    margin:0px;
}

.cont-icono>i{
    padding:10px 32px 10px 10px;
    font-size:40px;
    color:#fff;
    display:block;
}
.contenedor.activo{
    right:0px;
}
.cont-imagen>img{
    width:100%;
    height:100%;
}

JS

$(function(){
    
    var elem = $(".contenedor");
    
    $(".cont-icono").click(function(){

        if(elem.hasClass("inactivo")){
            elem.removeClass("inactivo");
            elem.addClass("activo");
            $(this).children("i").attr("class","icon-right-open-big");
        }else{
            elem.addClass("inactivo");
            elem.removeClass("activo");
            $(this).children("i").attr("class","icon-smile");
        }
    });
    
});