JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:755px">
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item1</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item2</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item3</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item4</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item5</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item6</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item7</div>
</div>
<div class="plitka item plitka1">
<a href="#">
<img src="#">
</a>
<div class="count">152</div>
<div class="title">item8</div>
</div>
</div>
CSS
.plitka1, .plitka10 {
background-color: #e7e2e8;
}
.item {
color: #48434e;
position: relative;
text-align: center;
transition: box-shadow 200ms ease 0s;
}
.plitka1 {
background-color: #a1005b;
}
.plitka {
color: #48434e;
float: left;
height: 120px;
margin: 0 5px 5px 0;
width: 120px;
}
.plitka1:hover{
height:144px;
width:144px;
margin: -12px -7px -7px -12px;
z-index:2;
}
.item a {
display: block;
height: 100%;
overflow: hidden;
width: 100%;
}
.plitka a {
text-decoration: none;
}
a {
color: #0064a4;
}
.item img {
height: 100%;
width: 100%;
}
img {
border: 0 none;
}
img {
vertical-align: middle;
}
.item .count {
background: #000 none repeat scroll 0 0;
bottom: 28px;
height: 23px;
left: 49px;
line-height: 22px;
opacity: 0;
position: absolute;
width: 46px;
}
.item .title {
background-color: inherit;
bottom: 0;
height: 24px;
left: 0;
line-height: 22px;
position: absolute;
text-transform: lowercase;
white-space: nowrap;
width: 100%;
color:#fff;
}