12个使用CSS自定义属性实现的图像悬停效果

CSS images with Costum Properties，照片列表（相片墙）带各种悬停动效。

css3, 图片效果

《three.js GLTF Animation Blending（分离的动画文件）》申请公开！

第三方库
作品简介 3479
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*
* The function calc is working wrong in case calculations in the Firefox
*/

.photobox {
    display: inline-block;
}
.photobox__previewbox {
    position: relative;
    overflow: hidden;
}
.photobox__preview {
    display: block;
    max-width: 100%;
    height: auto;
}
.photobox__previewbox:before {
    content: "";
    background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
}
/* type 1 */

.photobox_type1 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    transition: transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    transition: transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2), -webkit-transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    -webkit-transform: scale(0);
    transform: scale(0);
}
.photobox_type1:hover .photobox__previewbox:before {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .2s);
    transition-duration: var(--photoboxAnimationDuration, .2s);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.photobox_type1 .photobox__label {
    width: 50%;
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%);
    -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .2s) ease-out;
    transition: -webkit-transform var(--photoboxAnimationDuration, .2s) ease-out;
    transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
    transition: transform var(--photoboxAnimationDuration, .2s) ease-out, -webkit-transform var(--photoboxAnimationDuration, .2s) ease-out;
    position: absolute;
    top: 50%;
    left: 15%;
}
.photobox_type1:hover .photobox__label {
    -webkit-transition-duration: var(--photoboxAnimationDuration, .2s);
    transition-duration: var(--photoboxAnimationDuration, .2s);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
/* type 2*/

.photobox_type2 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    transition: -webkit-transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    transition: transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    transition: transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2), -webkit-transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
    -webkit-transform: scale(0);
    transform: scale(0);
}
.photobox_type2:hover .photobox__previewbox:before {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .2s);
    transition-duration: var(--photoboxAnimationDuration, .2s);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.photobox_type2 .photobox__label {
    width: 50%;
    text-align: right;
    -webkit-transform: translate(200%, -50%);
    transform: translate(200%, -50%);
    -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .2s) ease-out;
    transition: -webkit-transform var(--photoboxAnimationDuration, .2s) ease-out;
    transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
    transition: transform var(--photoboxAnimationDuration, .2s) ease-out, -webkit-transform var(--photoboxAnimationDuration, .2s) ease-out;
    position: absolute;
    top: 50%;
    right: 15%;
}
.photobox_type2:hover .photobox__label {
    -webkit-transition-duration: var(--photoboxAnimationDuration, .2s);
    transition-duration: var(--photoboxAnimationDuration, .2s);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
/* type 3 */

.photobox_type3 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.photobox_type3:hover .photobox__previewbox:before {
    opacity: 1;
}
.photobox_type3 .photobox__label {
    width: 98%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
}
.photobox_type3:hover .photobox__label {
    opacity: 1;
    -webkit-transition-duration: var(--photoboxAnimationDuration, .4s);
    transition-duration: var(--photoboxAnimationDuration, .4s);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type3 .photobox__preview {
    -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.photobox_type3:hover .photobox__preview {
    -webkit-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}
/* type 4 */

.photobox_type4 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.photobox_type4:hover .photobox__previewbox:before {
    opacity: 1;
}
.photobox_type4 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 200%);
    transform: translate(-50%, 200%);
    z-index: 2;
}
.photobox_type4:hover .photobox__label {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type4 .photobox__preview {
    -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.photobox_type4:hover .photobox__preview {
    -webkit-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}
/* type 5 */

.photobox_type5 .photobox__previewbox:before {
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.photobox_type5:hover .photobox__previewbox:before {
    opacity: 1;
}
.photobox_type5 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .4s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%);
    z-index: 2;
}
.photobox_type5:hover .photobox__label {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-duration: calc(var(--photoboxAnimationDuration, .4s) / 2);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
    transition-delay: calc(var(--photoboxAnimationDuration, .4s) / 2);
}
.photobox_type5 .photobox__preview {
    -webkit-transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform var(--photoboxAnimationDuration, .4s) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.photobox_type5:hover .photobox__preview {
    -webkit-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}
/* type 6 */

.photobox_type6 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type6:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type6 .photobox__label {
    width: 95%;
    text-align: center;
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%);
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    position: absolute;
    top: 50%;
    left: 50%;
}
.photobox_type6:hover .photobox__label {
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* type 7 */

.photobox_type7 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type7:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type7 .photobox__label {
    width: 95%;
    text-align: center;
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%);
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}
.photobox_type7:hover .photobox__label {
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.photobox_type7 .photobox__preview {
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.photobox_type7:hover .photobox__preview {
    -webkit-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}
/* type 8 */

.photobox_type8 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type8:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type8 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 200%);
    transform: translate(-50%, 200%);
    z-index: 3;
}
.photobox_type8:hover .photobox__label {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}
.photobox_type8 .photobox__preview {
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}
.photobox_type8:hover .photobox__preview {
    -webkit-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}
/* type 9 */

.photobox_type9 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type9:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type9 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 200%);
    transform: translate(-50%, 200%);
    z-index: 3;
}
.photobox_type9:hover .photobox__label {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}
.photobox_type9 .photobox__preview {
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.photobox_type9:hover .photobox__preview {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
/* type 10 */

.photobox_type10 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type10:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type10 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 4) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 200%);
    transform: translate(-50%, 200%);
    z-index: 3;
}
.photobox_type10:hover .photobox__label {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 2);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
}
/* type 11 */

.photobox_type11 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type11:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type11 .photobox__label {
    width: 95%;
    text-align: center;
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%);
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}
.photobox_type11:hover .photobox__label {
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.photobox_type11 .photobox__preview {
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.photobox_type11:hover .photobox__preview {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
/* type 12 */

.photobox_type12 .photobox__previewbox:before {
    width: 0;
    height: 0;
    padding: 25%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease, -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) ease;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
}
.photobox_type12:hover .photobox__previewbox:before {
    -webkit-transform: translate(-50%, -50%) scale(4);
    transform: translate(-50%, -50%) scale(4);
    -webkit-transition-duration: var(--photoboxAnimationDuration, .8s);
    transition-duration: var(--photoboxAnimationDuration, .8s);
}
.photobox_type12 .photobox__label {
    width: 95%;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    transition: opacity calc(var(--photoboxAnimationDuration, .8s) / 2) ease-out;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
}
.photobox_type12:hover .photobox__label {
    -webkit-transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-duration: calc(var(--photoboxAnimationDuration, .8s) / 4);
    -webkit-transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
    transition-delay: calc(var(--photoboxAnimationDuration, .8s) / 4);
    opacity: 1;
}
.photobox_type12 .photobox__preview {
    -webkit-transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    transition: transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9), -webkit-transform calc(var(--photoboxAnimationDuration, .8s) / 2) cubic-bezier(0.71, 0.05, 0.29, 0.9);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.photobox_type12:hover .photobox__preview {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
/*
* demo styles for photobox
*/

.photobox {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    width: 33.33333%;
    --photoboxOverlay: rgba(72, 27, 174, .7);
    /*--photoboxAnimationDuration: .5s;*/
}
@media screen and (max-width: 480px) {
    .photobox {
        width: 100%;
    }
}
/*
* demo page
*/

@media screen and (min-width: 768px) {
    html {
        font-size: 62.5%;
    }
}
@media screen and (max-width: 767px) {
    html {
        font-size: 50%;
    }
}
body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
a {
    text-decoration: none;
    color: inherit;
}
a:hover,
a:focus {
    text-decoration: underline;
}
.page {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.page__demo {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.page__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.main-container {
    padding-left: 1rem;
    padding-right: 1rem;
}
.footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 1.4rem;
    background-color: #222;
}
@media screen and (min-width: 641px) {
    .footer__container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .melnik909 {
        margin-left: 2rem;
    }
}
@media screen and (max-width: 640px) {
    .melnik909 {
        display: none;
    }
}

HTML

<div class="page">
    <div class="page__demo">
        <div class="page__container">
            <div class="photobox photobox_type1">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal2.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #1</span>
                </div>
            </div>
            <div class="photobox photobox_type2">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal1.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #2</span>
                </div>
            </div>
            <div class="photobox photobox_type3">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal3.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #3</span>
                </div>
            </div>
            <div class="photobox photobox_type4">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal3.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #4</span>
                </div>
            </div>
            <div class="photobox photobox_type5">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal2.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #5</span>
                </div>
            </div>
            <div class="photobox photobox_type6">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal1.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #6</span>
                </div>
            </div>
            <div class="photobox photobox_type7">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal2.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #7</span>
                </div>
            </div>
            <div class="photobox photobox_type8">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal1.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #8</span>
                </div>
            </div>
            <div class="photobox photobox_type9">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal3.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #9</span>
                </div>
            </div>
            <div class="photobox photobox_type10">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal1.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #10</span>
                </div>
            </div>
            <div class="photobox photobox_type11">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal3.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #11</span>
                </div>
            </div>
            <div class="photobox photobox_type12">
                <div class="photobox__previewbox">
                    <img src="/uploads/161001/normal2.jpg" class="photobox__preview" alt="Preview">
                    <span class="photobox__label">Effect #12</span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS images with Costum Properties，照片列表（相片墙）带各种悬停动效。

css3, 图片效果

编辑器支持Emmet

快捷键

CSS images with Costum Properties，照片列表（相片墙）带各种悬停动效。

css3, 图片效果

一款使用CSS自定义属性实现的时间轴布局

CSS3 2个实用的鼠标悬停文本下划线动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：