JSFiddle - React, Tailwind, and code Playground

HTML

<div class='outer'>
    <div class='item'>
        <img src='http://likegsm.ua/media/upload/shop/38/medium/17717.jpg' alt='' /><center>HTC One X AТ/Т 16Gb 4G Black</center>
    </div>
    <div class='invisible'>
        <div class='bg'>
            В режиме ожидания:400 ч
            Диагональ основного экрана:4,7"
            В режиме разговора:8 ч
            Срок гарантии:1 мес
            Тип дисплея:Super LCD2
            Тип корпуса:Моноблок
            Операционная система:Android
        </div>
    </div>    
</div>    
<div class='outer'>
    <div class='item'>
        <img src='http://likegsm.ua/media/upload/shop/38/medium/17717.jpg' alt='' /><center>HTC One X AТ/Т 16Gb 4G Black</center>
    </div>
    <div class='invisible'>
        <div class='bg'>
            В режиме ожидания:400 ч
            Диагональ основного экрана:4,7"
            В режиме разговора:8 ч
            Срок гарантии:1 мес
            Тип дисплея:Super LCD2
            Тип корпуса:Моноблок
            Операционная система:Android
        </div>
    </div>    
</div>

CSS

.outer{
    width:280px;
    margin:20px;
    position:relative;
    padding:10px; 
    /*float:left;*/
}
.item{ 
    width:100%;
    position:relative;
}
.item img{
    display:block;
    margin:0 auto;
}
center{
    color:#00f;
    font-size:1.2em;
}
.invisible{
    opacity:0;
    padding:260px 10px 0;
    position:absolute;
    top:0;
    transition:opacity .5s;
}
.outer:hover > .item{
    z-index:200;
}
.outer:hover .invisible{
    z-index:100;
    opacity:1;
    border:1px solid #888; 
    border-radius:8px;
    box-shadow:3px 3px 1px #aaa;
}
.bg{
    background:#fff;
}