第一步：

书写html结构布局，结构主要是a分类入口盒子，img入口图片和.white白色遮罩，.txtbox文字盒子。对应的内容html里面有注释。

下面是详细的html结构代码：

        <div class="enter">
        <!-- 入口超链接 -->
        <a href="#">
            <!-- 图片 -->
            <img src="a.png" alt="">
            <!-- 白色遮罩 -->
            <div class="white"></div>
            <!-- 文字内容 -->
            <div class="txtbox">
                <h3>居家收纳</h3>
                <p>Home Daily</p>
            </div>
        </a>
        <!-- 入口超链接 -->
        <a href="#">
            <!-- 图片 -->
            <img src="b.png" alt="">
            <!-- 白色遮罩 -->
            <div class="white"></div>
            <!-- 文字内容 -->
            <div class="txtbox">
                <h3>居家收纳</h3>
                <p>Home Daily</p>
            </div>
        </a>
        <!-- 入口超链接 -->
        <a href="#">
            <!-- 图片 -->
            <img src="c.png" alt="">
            <!-- 白色遮罩 -->
            <div class="white"></div>
            <!-- 文字内容 -->
            <div class="txtbox">
                <h3>居家收纳</h3>
                <p>Home Daily</p>
            </div>
        </a>
        <!-- 入口超链接 -->
        <a href="#">
            <!-- 图片 -->
            <img src="d.png" alt="">
            <!-- 白色遮罩 -->
            <div class="white"></div>
            <!-- 文字内容 -->
            <div class="txtbox">
                <h3>居家收纳</h3>
                <p>Home Daily</p>
            </div>
        </a>

    </div>

第二步：

书写css静态样式，注意使用的图片是正方形，a分类入口盒子要旋转transform:rotate(-45deg)变成棱形，a分类入口盒子里面的文字盒子.txtbox要旋转回正方向transform:rotate(45deg)，对应的代码在css里面有注释提示。

旋转前

旋转后

第三步：

书写好静态布局，开始制作动画，下面是动画制作思路，相关代码在css里面有注释。

鼠标移动上a盒子，a盒子保持旋转旋转translate(-45deg)，位移transform:translate(5px)。

默认设置.white白色遮罩的透明度opacity设置成0。
鼠标移动上a盒子，设置白色遮罩.white透明的opacity变成1显示。

默认设置标题h3和段落p设置位正负值transform:translate(100%)移出盒子外部。
鼠标移动上a盒子，设置标题h3和段落p设置transform:translate(0)回到原来的位置。

鼠标移动上a盒子，设置图片滤镜， filter: grayscale(100%) blur(2px); 灰度100%并且模糊blur。

注意：以上:hover鼠标移上效果都需要回到标签初始状态添加transition过渡时间。

下面是详细的css布局样式+动画的代码：

<style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .enter {
            width: 538px;
            height: 324px;
            margin: 100px auto;
            position: relative;
        }

        .enter a {
            width: 143px;
            height: 145px;
            /* 正方形的图片盒子旋转-45deg */
            transform: rotate(-45deg);
            text-align: center;
            color: #666;
            position: absolute;
            transition: 0.5s;
        }

        /* 白色遮罩 */
        .white {
            width: 80%;
            height: 80%;
            background: rgba(255, 255, 255, 0.7);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* 默认透明度隐藏白色遮罩 */
            opacity: 0;
            transition: 0.5s;

        }

        .txtbox {
            position: absolute;
            width: 100%;
            height: 50px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* 文字要旋转回来正方向 */
            transform: rotate(45deg);
            overflow: hidden;
        }

        .txtbox p {
            color: #f60;
        }

        .enter a:nth-child(1) {
            left: 32px;
            top: 30px;
        }

        .enter a:nth-child(2) {
            left: 248px;
            top: 30px;
        }

        .enter a:nth-child(3) {
            left: 139px;
            top: 141px;
        }

        .enter a:nth-child(4) {
            left: 360px;
            top: 140px;
        }

        /* 文字标题向左边移动隐藏 */
        .txtbox h3 {
            transform: translateX(-100%);
            transition: 0.5s 0.1s;
        }

        /* 段落向左边移动隐藏 */
        .txtbox p {
            transform: translateX(100%);
            transition: 0.5s 0.2s;
        }

        .enter img {
            transition: 0.5s;
        }

        /* 鼠标移上盒子 */
        .enter a:hover {
            /* 盒子保持旋转旋转-45deg，位移45deg */
            transform: rotate(-45deg) translate(-5px);
        }

        /* 鼠标移上盒子，设置img */
        .enter a:hover img {
            /* 滤镜：灰度100% 模糊2px */
            filter: grayscale(100%) blur(2px);
        }

        /* 鼠标移上盒子，标题位移回原来的位置 */
        .enter a:hover h3 {
            transform: translateX(0);
        }

        /* 鼠标移上盒子，段落位移回原来的位置 */
        .enter a:hover p {
            transform: translateX(0);
        }

        /* 鼠标移上盒子，白色遮罩透明度变成 1 */
        .enter a:hover .white {
            opacity: 1;
        }
    </style>