纯CSS众所周知就是只用CSS实现特效！
在这里注释一下：
图片需要自己添加！
这篇文章只详解CSS特效！
.demo{
padding: 30em;
width: 360px;
height: auto;
}
/* 背景颜色 渐变； 边框圆角 ；相对定位；多余边框隐藏；鼠标指针变成小手*/
.box{
background: linear-gradient(#8E2DE2,#4A00E0);
border-radius: 7px;
position: relative;
overflow: hidden;
cursor: pointer;
}
/* 设置一个伪类before 前置的；content 内容设置为空；背景设置为透明背景颜色；宽高各为父级的百分百；整体透明度为0；定位为绝对定位；
top 为 0； left 为 0； 层次结构 index为0； transition 为 0.5s；
*/
.box:before{
content: "";
background: rgba(0, 0,0, 0.1);
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 0;
transition: all 0.5s;
}
/* 设置 触碰box 后box的伪类before 为 透明度 1 */
.box:hover:before{
opacity:1;
}
/* box 的图片 宽为百分百 高取决于自动；transition时间定义为0.5s ；
clip-path 这个样式 作为重点！！！！！！！！
clip-path 可以称之为剪切切片；
polygon为它的属性 （） 括号里分为4个面 中间用逗号隔开
分 上 右 下 左 每个方位 都有俩个 定位向 【分为水平和垂直】；
-webkit- 兼容浏览器 内核架构；
要写一个 架构样式 必须 注重各大浏览器的兼容；
*/
.box img{
width: 100%;
height: auto;
transition: all 0.5s ease;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* 触碰盒子 图片透明度为 0.5； 它的剪切切片 变为 菱形的*/
.box:hover img{
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* 盒子的 文字内容：字体颜色为白色；文本居中；宽为父级的100%;透明度为0；
transform： translateX 以X轴 让他在 X轴的 中间 translateY 以Y轴 让他在 Y轴的 中间
rotate 旋转 单位为deg 先给他定义 一个 旋转 为-55deg;
设置 绝对定位； top为50%； left为50%； 文本的层次结构 Z-index 为1；
transition 时间轴 为 0.5s；
*/
.box-content{
color: #fff;
text-align: center;
width: 100%;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(-55deg);
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transition: all 0.5s;
}
/* 触碰盒子他的文本区域 透明度为1，transform 继续让它 X 和 Y轴为中心
但是 它的旋转 为 0； 让它 从 -55deg 变为 0deg；
*/
.box:hover .box-content{
opacity: 1;
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
/* 文本区 就不 详细介绍了 */
.title{
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
text-shadow: 0 0 5px #000;
margin: 0 0 3px 0;
}
.post{
font-size: 16px;
text-shadow: 0 0 5px #000;
text-transform: capitalize;
display: block;
}
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="images/img-1.jpg">
<div class="box-content">
<h3 class="title">Williamson</h3>
<span class="post">Web designer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
