JSFiddle - React, Tailwind, and code Playground

by backstabe

HTML

<div id="block-views-hostel-rooms-block" class="block block-views contextual-links-region even">
    <div class="view view-hostel-rooms view-id-hostel_rooms view-display-id-block view-dom-id-25ebac0d5977926b249c50aaa7f20dbc">
        <div class="view-content">
            <ul class="room-items">
                <li class="room-item"> <span>Номер Люкс</span>

<a href="/nashi-nomera/nomera-lyuks"><img typeof="foaf:Image" src="http://tmp.gostinica-mayak.ru/sites/default/files/styles/img-hostel-menu/public/n-lux.jpg?itok=VE0dpAyk" width="220" height="190" alt="Номер Люкс" title="Комфортабельный номер, оснащенный всем необходимым для хорошего отдыха. Идеальный вариант для проживания."></a> 
                </li>
                <li class="room-item"> <span>2-х местный номер</span>

<a href="/nashi-nomera/dvuxmestnyj-nomer"><img typeof="foaf:Image" src="http://tmp.gostinica-mayak.ru/sites/default/files/styles/img-hostel-menu/public/n-2x.jpg?itok=fMy770TK" width="220" height="190" alt="2-х местный номер" title="Семь уютных 2-х местных номеров без удобств (Все удобства есть на этаже). Отличный вариант для тех кто в командировке."></a> 
                </li>
                <li class="room-item"> <span>3-х местный номер</span>

<a href="/nashi-nomera/trexmestnyj-nomer"><img typeof="foaf:Image" src="http://tmp.gostinica-mayak.ru/sites/default/files/styles/img-hostel-menu/public/n-3x.jpg?itok=E8T2VY_U" width="220" height="190" alt="3-х местный номер" title="Уютный номер, рассчитанный на трехместное размещение с туалетной комнатой и душевой кабиной."></a> 
                </li>
                <li class="room-item"> <span>4-х местный номер</span>

<a href="/nashi-nomera/chetyrexmestnyj-nomer"><img typeof="foaf:Image" src="http://tmp.gostinica-mayak.ru/sites/default/files/styles/img-hostel-menu/public/n-4x.jpg?itok=MpfN_8rm" width="220" height="190" alt="4-х местный номер" title="Уютный и светлый номер, рассчитанный на проживание 4-х человек, оснащенный туалетом и ванной...

CSS

#block-views-hostel-rooms-block ul.room-items {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
}
#block-views-hostel-rooms-block ul.room-items li {
    list-style: none;
    width: 220px;
    height: 193px;
    display: table-cell;
    padding: 3px;
    position: relative;
}
#block-views-hostel-rooms-block ul.room-items img {
    border-radius: 20px;
    -mox-border-radius: 20px;
    -webkit-border-radius: 20px;
    box-shadow: 1px 1px 2px #000;
}
#block-views-hostel-rooms-block ul.room-items span {
    width: 200px;
    position: absolute;
    text-align: center;
    top: 20px;
    padding: 0;
    margin: 0;
    font-family: Century Gothic;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}
.tooltip {
    width:250px;
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:10px;
    color:#fff;
    font-size:12px Arial;
}

JavaScript

(function ($) {
    $(function () {
        $(document).ready(function () {
            // Tooltip only Text
            $('#block-views-hostel-rooms-block ul.room-items img').hover(function () {
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                    .text(title)
                    .appendTo('body')
                    .fadeIn('slow');
            }, function () {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
            }).mousemove(function (e) {
                var mousex = e.pageX - 110; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                    .css({
                    top: mousey,
                    left: mousex
                })
            });
        });

    });
})(jQuery);