/* Set height of card. The image is set to cover, so increasing the height won’t distort the image.*/
.flip–card {
height: 300px;
perspective: 1000px;
–webkit–perspective: 1000px;
}
/* This container is needed to position the front and back side */
.flip–card–inner {
position: relative;
width: 100%;
height: 100%;
text–align: center;
transition: transform 0.8s;
–webkit–transition: transform 0.8s;
–webkit–transition: –webkit–transform 0.8s;
transform–style: preserve–3d;
–webkit–transform–style: preserve–3d;
}
/* Position the front and back side */
.flip–card–front, .flip–card–back {
position: absolute;
width: 100%;
height: 100%;
backface–visibility: hidden;
–webkit–backface–visibility: hidden;
}
/* Add background to front incase image doesn’t load */
.flip–card–front {
background: #0D1B22;
}
/* Set the image to cover, so if you increase height it won’t skew image. Image height and .flip-card height should be the same. */
.flip–card–front img {
height: 300px;
object–fit: cover;
}
/* Style the back side */
.flip–card–back {
padding: 40px;
background–color: #0D1B22;
display: table;
}
/* Vertically centre align text on back */
.flip–card–back–inner {
display: table–cell;
vertical–align: middle;
max–width: 300px;
}
.flip–card–back h3 {
color: white;
margin–bottom: 10px;
}
/* Color the view project text to look like a link */
.link–styling {
color: #F56640 !important;
}
/* Reverse back of card so is correct orientation after flip */
.flip–card–rotate–left .flip–card–back,
.flip–card–rotate–right .flip–card–back {
transform: rotateY(180deg);
–webkit–transform: rotateY(180deg);
}
.flip–card–rotate–up .flip–card–back,
.flip–card–rotate–down .flip–card–back {
transform: rotateX(180deg);
–webkit–transform: rotateX(180deg);
}
/* Flip animation on mouse hover – rotate right */
.flip–card–rotate–right .flip–card:hover .flip–card–inner {
transform: rotateY(180deg);
–webkit–transform: rotateY(180deg);
}
/* Flip animation on mouse hover – rotate left */
.flip–card–rotate–left .flip–card:hover .flip–card–inner {
transform: rotateY(–180deg);
–webkit–transform: rotateY(–180deg);
}
/* Flip animation on mouse hover – rotate up */
.flip–card–rotate–up .flip–card:hover .flip–card–inner {
transform: rotateX(180deg);
–webkit–transform: rotateX(180deg);
}
/* Flip animation on mouse hover – rotate down */
.flip–card–rotate–down .flip–card:hover .flip–card–inner {
transform: rotateX(–180deg);
–webkit–transform: rotateX(–180deg);
}
/* Responsiveness – turns off the flip animation on mobile and layers the text over the image with a background overlay.*/
@media (max–width: 980px) {
.flip–card–rotate–left .flip–card–back,
.flip–card–rotate–right .flip–card–back{
transform: rotateY(0deg);
–webkit–transform: rotateY(0deg);
background–color: rgba(13,27,34,0.5);
}
.flip–card–rotate–up .flip–card–back,
.flip–card–rotate–down .flip–card–back {
transform: rotateX(0deg);
–webkit–transform: rotateX(0deg);
background–color: rgba(13,27,34,0.5);
}
.flip–card–back p {
color: white;
}
.flip–card–rotate–left .flip–card:hover .flip–card–inner,
.flip–card–rotate–right .flip–card:hover .flip–card–inner{
transform: rotateY(0deg);
–webkit–transform: rotateY(0deg);
}
.flip–card–rotate–up .flip–card:hover .flip–card–inner,
.flip–card–rotate–down .flip–card:hover .flip–card–inner {
transform: rotateX(0deg);
–webkit–transform: rotateX(0deg);
}
}
