JSFiddle - React, Tailwind, and code Playground
HTML
<div class="col-md-4">
<div class="bx_cources">
<div class="bg_cource">
<img src="http://41.93.48.204/club/wp-content/uploads/2015/10/programming.jpg" alt="" />
</div>
<div class="cource_info_spans">
<div class="logo_cource">
<img src="http://41.93.48.204/club/wp-content/uploads/2015/10/programming.jpg" alt="" />
</div>
<div class="cource_info_2spans">
<span>تست میشه</span>
<span>تست</span>
</div>
</div>
</div>
</div>
CSS
.bx_cources {
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 10px;
margin: 10px;
overflow: hidden;
margin-bottom: 20px;
padding: 0 !important;
background-color: #fff;
}
.bx_cources:hover img {
transform: scale(1.5)
}
.bg_cource {
height: 200px;
}
.bg_cource > img {
height: 100%;
width: 100%;
transform: scale(1.3);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
transition: all 400ms ease-in-out;
}
.cource_info_spans {
padding: 15px;
position: relative;
}
.bg_cource {
height: 150px;
overflow: hidden;
}
.logo_cource > img {
height: 100%;
width: 100%;
transition: all 400ms ease-in-out;
}
.logo_cource {
border-radius: 100%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
height: 140px;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
top: -70px;
width: 140px;
}
.cource_info_2spans span:nth-child(1) {
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
text-shadow: 0 3px rgba(0, 0, 0, 0.1);
}
.cource_info_2spans span {
text-align: center;
margin: 10px
}
.cource_info_2spans span:nth-child(2) {
display: block;
font-size: 15px;
margin-bottom: 0 !important;
}
.cource_info_2spans {
margin-top: 70px;
}