純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>