CSS圖片折疊效果是一種有趣的設計，可以在網頁上添加一些生動有趣的元素。通過CSS的偽類和CSS3的transform屬性，我們可以輕松地實現這種效果。

.fold {
overflow: hidden;
position: relative;
width: 300px;
height: 200px;
background: #fff url("image.jpg") no-repeat 0 0;
}
.fold:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(-45deg, transparent 0%, transparent 50%, #000 50%);
transform-origin: 100% 0;
transform: rotateZ(-45deg);
transition: all 0.3s ease-in-out;
}
.fold:hover:before {
transform: rotateZ(0);
}

代碼中，我們首先創建一個大小為300x200像素的容器，使用背景圖片作為內容。然后使用偽類:before添加一個透明到黑色顏色漸變的半透明層，以及transform屬性，將其旋轉45度。在:hover時，讓這個偽類元素上的transform屬性從初始狀態到過渡后的狀態過渡，就可以實現圖片的折疊效果了。

這種折疊效果不僅可以應用于圖片，還可以用在文本、圖標等元素上。通過改變代碼中的漸變顏色、旋轉角度等屬性，可以實現不同的折疊效果。