JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="work">
    <img src="http://upatov.com/content/img/portf/googleblogrussia.jpg" alt="Превью работы">
    <div class="info-work" style="display: none; top: 0px;">
        <p>Сайт информационного портала, блога.
            <br>Последние новости от компании Google.
            <br>
            <br>CMS - Blogger (BlogSpot)</p>
        <div class="next">	<a href="http://loeees.blogspot.com/" target="_blank">Посмотреть работу</a>	
        </div>
    </div>
</div>

CSS

.fb_iframe_widget iframe {
    position:absolute;
    z-index:88;
}
img:hover, .work {
    cursor:pointer;
}
.code {
    padding:7px;
    position:relative;
}
.php {
    border:2px solid #F30B0B;
    background:#FFE0E0;
}
.js {
    border:2px solid #00B934;
    background:#E3EEE3;
}
.css {
    border:2px solid #000000;
    background:#E6E7E7;
}
.js:hover:before, .html:hover:before, .php:hover:before, .css:hover:before {
    position:absolute;
    right:9px;
    margin:-5px;
    padding:5px;
    background:#FFF;
}
.js:hover:before {
    content:"javascript";
}
.html:hover:before {
    content:"html";
}
.php:hover:before {
    content:"php";
}
.css:hover:before {
    content:"css";
}
.html {
    border:2px solid #007EB9;
    background:#E3EBEE;
}
/**/
b, button {
    -moz-transition:all 0.2s 0s ease-in;
    -o-transition:all 0.2s 0s ease-in;
    -webkit-transition:all 0.2s 0s ease-in;
    -ms-transition:all 0.2s 0s ease-in;
}
a:hover, b:hover, button:hover {
    -moz-transition:all 0.2s 0s ease-in;
    -o-transition:all 0.2s 0s ease-in;
    -webkit-transition:all 0.2s 0s ease-in;
    -ms-transition:all 0.2s 0s ease-in;
}
.relative {
    position:relative;
}
.four-block a {
    text-decoration:none;
    border-bottom:1px dashed rgb(255, 103, 90);
    color:rgb(51, 51, 51);
}
.four-block a:hover {
    color:rgb(255, 103, 90);
}
#footer a.eqw, i.eqw {
    text-decoration:none;
    border-bottom:1px dashed rgb(255, 103, 90);
    color:rgb(51, 51, 51);
}
#footer a.eqw:hover {
    color:rgb(255, 103, 90);
}
.news a {
    border-bottom:none;
}
.adsense {
    position:fixed;
    top:70px;
    right:10px;
    z-index:9999;
}
.ads-t {
    top:10px;
}
.imgimg img {
    max-width:58px;
    max-height:58px;
}
.aaa {
    color:#aaaaaa;
    text-shadow:-1px -1px #444;
}
.bls {
    color:#ea7e7b;
    text-shadow:-1px -1px #444;
}
.aaa, .bls {
    padding:0px;
    margin:0px;
    border:none;
    font-weight:normal;
}
input[type="radio"] {
    margin:3px 11px 0px 5px;
   ...

JavaScript

$(".work").hover(function () {
        $(this).children(".info-work").css("top", "");
        $(this).children(".info-work").css("bottom", "0");
        $(this).children(".info-work").slideDown(500, function () {
            $(this).css('bottom', '');
        });
    }, function () {
        $(this).children(".info-work").slideUp(520);

    });