子比美化 - 文章缩略图鼠标悬停自定义图片

1
/*文章缩略图悬停样式*/
2
.item-thumbnail {position: relative;overflow: hidden;transform: translateZ(0);}.item-thumbnail:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0);transition: all 0.4s cubic-bezier(0.4,0,0.2,1);border-radius: 12px;z-index: 2;max-width: 765px;margin: 0 auto;pointer-events: none;box-shadow: 0 0 0 rgba(0,0,0,0);}.item-thumbnail:after {pointer-events: none;content: '';position: absolute;top: 50%;left: 50%;width: 56px;height: 56px;margin: -28px 0 0 -28px;background: url(https://www.90svip.cn/logo.png) center/contain no-repeat;z-index: 3;transform: scale(1.8) rotate(15deg);transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);opacity: 0;filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));}.item-thumbnail:hover:before {background: rgba(0,0,0,0.6);box-shadow: 0 8px 24px rgba(0,0,0,0.15);border-radius: 16px;}.item-thumbnail:hover:after {transform: scale(1) rotate(0deg);opacity: 1;filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));}