JSFiddle - React, Tailwind, and code Playground

by anar1811

HTML

<div class="ag-short">
    <img class="ag-layer0" src="http://filmix.net/uploads/posts/2013-07/thumbs/1374921394_00224720.jpg"/>
    <div class="ag-layer1">
        Жанр:Фантастика
        <br/>
        Год:1991
        <br/>
        Режисер:Родригес
    </div>
    <div class="ag-nwtitle">Title</div>
</div>

CSS

.ag-short{
    background:#fff;
    margin:3px;
    width:268px !important;
    height:195px;
    -moz-box-shadow:0px 0px 5px #000000;
    -webkit-box-shadow:0px 0px 5px #000000;
    box-shadow:0px 0px 10px #000000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    float:left;
    position:relative;
    margin: 10px 4px 0px 4px;
}
.ag-layer0 {
    width:258px;
    height:155px;
    background:#330033;
    position:absolute;
    z-index:1;
    top:5px;
    left:5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
} 

.ag-layer1 {
    padding:5px;
    width:248px;
    height:145px;
    background:rgba(255,255,255,0.8);
    position:absolute;
    z-index:2;
    opacity:0;
    top:5px;
    left:5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow:inset 0px 0px 5px #7a7a7a;
    -webkit-box-shadow:inset 0px 0px 5px #7a7a7a;
    box-shadow:inset 0px 0px 5px #7a7a7a;
}
.ag-nwtitle{
    position:absolute;
    bottom:5px;
    left:5px;
    height:25px;
    line-height:25px;
    font-size:16px;
}

JavaScript

$('.ag-layer1').mouseover(function() { 
$(this).stop().fadeTo(1000, 1); 
}); 
$('.ag-layer1').mouseout(function() { 
$(this).stop().fadeTo(1000, 0); 
});