.box8
{
overflow:hidden;

}
.mt-30
{
margin-top:30px;
}
.mt-40
{
margin-top:40px;
}
.mb-30
{
margin-bottom:30px;
}
.box8 .post
{
font-style:normal;
text-align: center;
}
.box8:hover
{
border: 3px solid #9932CC;
-webkit-box-shadow: -1px -1px 22px 4px rgba(0,0,0,0.58);
-moz-box-shadow: -1px -1px 22px 4px rgba(0,0,0,0.58);
box-shadow: -1px -1px 22px 4px rgba(0,0,0,0.58);
}
a:hover
{
background-color:;
border-color:blue;
}
.box8 .title
{
margin:0;
position:absolute;
}

.box8
{

position:relative;
border-radius:20px;
width: 350px;
height: 300px;
margin: 8px 10px 8px 10px;
-webkit-box-shadow: -1px 2px 18px 5px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 18px 5px rgba(0,0,0,0.75);
box-shadow: -1px 2px 18px 5px #9932CC;
}

.box8 img
{
width:100%;
height:auto;
}
.box8 .box-content
{
width:100%;
height:100%;
background:rgba(0,0,0,.6);
opacity:0;
position:absolute;
top:0;
left:0;
transform:perspective(400px) rotateX(-90deg);
transform-origin:center top 0;
transition:all .5s ease 0s;
}
.box8 .title
{
background:#ef4050;
font-size:20px;
color:#fff;
}
.box8:hover .box-content
{
opacity:1;
transform:perspective(400px) rotateX(0);
}
.box8 .title
{
padding:5px 7px;
border-radius:5px;
font-weight:600;
bottom:20px;
left:20px;
transition:all .9s ease 0s;
}

.box8 .post
{
display:block;
font-size:25px;
font-weight:700px;
color:#fff;
text-decoration:none;
margin-bottom:10px;
border-style:solid;
border-radius :12px;
margin-left: 90px;
margin-right: 90px;
margin-top:148px;
}
.box8:hover:before
{
opacity:1;
}

.box8:hover .title
{
bottom: -40px;
}