*{
    margin: 0;
    padding: 0;
}
body{
    /* 方便演示，满屏居中 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2f3238;
}
.container{
    width: 100%;
    /* 弹性布局 水平+垂直居中 允许换行 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
figure{
    /* 相对定位 */
    position: relative;
    margin: 10px 1%;
    width: 480px;
    height: 360px;
    /* 溢出隐藏 */
    overflow: hidden;
    background-color: #34495e;
}
figcaption{
    color: #fff;
}
/* 黑色边框 */
figcaption::before,
figcaption::after{
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    border-style: solid;
    border-color: #101010;
    /* 设置过渡 */
    transition: transform 0.35s;
    /* 这里需要设置元素不对鼠标事件做出反应,图标的悬停样式才会有效 */
    pointer-events: none;
}
/* 右、下边框 */
figcaption::before{
    right: 0;
    bottom: 0;
    border-width: 0 70px 60px 0;
    /* 默认移出可视区域 */
    transform: translate(70px,60px);
}
/* 左、上边框 */
figcaption::after{
    top: 0;
    left: 0;
    border-width: 15px 0 0 15px;
    /* 默认移出可视区域 */
    transform: translate(-15px,-15px);
}
/* 图片 */
figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    /* 过渡 */
    transition: 0.35s;
}
/* 标题 */
figure h2{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    letter-spacing: 5px;
    font-weight: 300;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
    transform: translate(100%,0);
    transition: transform 0.35s;
}
figure h2 span{
    font-weight: 700;
}
/* 功能图标区域 */
figure p{
    position: absolute;
    top: 25px;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 70px;
    justify-content: center;
    align-items: center;
}
/* 图标 */
figure p i{
    margin-bottom: 30px;
    font-size: 22px !important;
    cursor: pointer;
    /* 默认隐藏 */
    transform: translate(90px,0);
    opacity: 0;
    /* 过渡 */
    transition: opacity 0.35s,transform 0.35s;
}
/* 接下来是鼠标悬停时的样式变化 */
figure:hover figcaption::before,
figure:hover figcaption::after{
    transform: translate(0,0);
}
figure:hover img{
    opacity: 0.8;
    width: 95%;
    height: 95%;
}
figure:hover h2,
figure:hover p i{
    transform: translate(0,0);
}
figure:hover p i{
    opacity: 1;
}
/* 设置各个图标的动画延迟(实现逐个进入) */
figure:hover p i:nth-child(1){
    transition-delay: 0.025s;
}
figure:hover p i:nth-child(2){
    transition-delay: 0.05s;
}
figure:hover p i:nth-child(3){
    transition-delay: 0.075s;
}
figure:hover p i:nth-child(4){
    transition-delay: 0.1s;
}
figure p i:hover{
    color: #f3cf3f;
}