JSFiddle - React, Tailwind, and code Playground

by Alexandr Zawgorodniy

HTML

<div class="paprika-box1">
                            <div class="box">
                                <div class="inner">
                                    <h3>Ресторан</h3>
                                </div>
                                <div class="circle"><img src="images/menu.png"></div>
                            </div>   
                        </div>
                        <div class="paprika-box">
                            <div class="box">
                                <div class="inner">
                                    <h3>Банкетный зал</h3>
                                </div>
                                <div class="circle"><img src="images/cake.png"></div>
                            </div>   
                        </div>
                        <div class="paprika-box">
                            <div class="box">
                                <div class="inner">
                                    <h3>Спорт-бар</h3>
                                </div>
                                <div class="circle"><img src="images/tv.png"></div>
                            </div>   
                        </div>

CSS

.paprika-box
{
	margin-left: 30px;
}
.box
{
  width: 350px;
  height: 320px;
  border: 2px solid #eaeaea;
  position: relative;
  margin-top: 100px;
  background-color: #fff;
 }
.inner
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
 }
.inner:before
{
  content: '';
  display: block;
  width: 120px;
  height: 120px;
  border-radius:50%;
  border: 2px solid #eaeaea;
  position: absolute;
  top: -60px;
  left: 50%;
  margin-left: -62px; 
  
  }
.circle
{
  width: 100px;
  height: 100px;
  border: 2px solid #eaeaea;
  border-radius:50%;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  background-color: #fff;
  box-shadow: 0 0 0 10px #fff;
  box-sizing: border-box;

 }
.circle img
{
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%); 
	margin-top: 15px;	
}
.inner:hover ~.circle
{
	border: 4px solid #d1ad4f;
}
.inner:hover
{
	box-shadow:  0 0 20px rgba(0,0,0,0.2);
}
.inner:hover:before
{
	box-shadow:   inset 2px 2px 10px 0 rgba(0,0,0,0.2);
	z-index: 999;
}
.inner h3
{
	font-size: 18px;
	color: #474f51;
	font-weight: bold;
	padding-top: 50px;
	text-transform: uppercase;
	letter-spacing: 6px;
}