<style>
.shine{
display:none;
}
.project {
width: 100%;
float: left;
margin-right: 5%;
}
.project__image {
display: block;
position: relative;
}
.project__image img {
width: 100%;
max-width: 100%;
display: block;
}
.project__image:after {
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
transition: opacity .3s ease;
opacity: 0;
}
.project__card {
position: relative;
will-change: transform;
transition: box-shadow .3s ease;
box-shadow: 0 10px 30px transparent;
}
.project__card.hover-in {
transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
.project__card.hover-out {
transition: -webkit-transform .2s ease-in;
transition: transform .2s ease-in;
transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}
.project:hover .project__card {box-shadow: 0 8px 50px 10px rgba(92, 145, 255, 0.64)}
.project:hover .project__image:after { opacity: 1; }
.project:hover .project__detail {
border-width: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.project:hover .project__title, .project:hover .project__category {
-webkit-transform: translateY(0) scale(1);
-ms-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
opacity: 1;
}
.project__detail {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
pointer-events: none;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
border: 0 solid rgba(255, 255, 255, 0.1);
transition: border .4s ease;
}
.project__detail a{
color:#ffffff !important;
font-family: 'Roboto', Arial,sans-serif;
}
.project__title {
margin: 0 0 10px;
font-size: 36px;
font-weight: 700;
transition: .4s ease;
opacity: 0;
-webkit-transform: translateY(40px) scale(0);
-ms-transform: translateY(40px) scale(0);
transform: translateY(40px) scale(0);
will-change: transform;
}
.project__category {
opacity: 0;
transition: .4s ease;
transition-delay: .1s;
-webkit-transform: translateY(40px) scale(0);
-ms-transform: translateY(40px) scale(0);
transform: translateY(40px) scale(0);
will-change: transform;
}
.project__category a {
color: rgba(255, 255, 255, 0.8);
font-size: 1.3em;
}
</style>