JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div id="preview"></div>

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<br />

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<br />

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item #123</li>
    <li class="code">Код товара: 00128</li>
    <li class="price">3,150 руб</li>
</ul>

<ul class="item">
    <li class="image"><img src="http://medicpulse.ru/uploads/posts/2012-11/1352461872_pic190.jpg" alt="" /></li>
    <li class="title">Item...

CSS

body { text-align: center; }
ul, li { list-style: none; padding: 0px; margin: 0px; }
img { display: block; }

#preview {
    display: none;
    position: fixed;
    width: 640px; height: 480px;
    top: 0px; right: 50%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 999;
}

.item {
    display: inline-block;
    position: relative;
    padding: 10px;
    margin: 10px;
    height: 100px; width: 230px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,.2);
    border-radius: 4px;
}

.item:hover { background-color: #eee; }
.item:active { background-color: #eee; box-shadow: 1px 1px 5px 1px rgba(0,0,0,.2) inset; }

.item .image img { width: 100px; height: 100px; border: 1px solid #aaa; border-radius: 4px; }
.item .image { position: absolute; top: 10px; left: 10px; }
.item .title, .item .code, .item .price { padding-left: 110px; }
.item .title { font-size: 1.2em; }
.item .code { font-size: 0.8em; margin-bottom: 15px; }
.item .price { font-size: 1.4em; font-weight: 700; }

.item:nth-of-type(3n) {
      /* border: 5px solid red; */
}

JavaScript

$('.item').hover(function(){
    var ktop = $(this).offset().top;
    var kright = $(this).offset().left+260;
    $('#preview').css({'top':ktop, 'left':kright}).fadeIn(300);
    
    
    
}, function(){
    $('#preview').fadeOut(300);
    
    
    
});