子比主题 – 文章封面缩略图悬停样式（四款）
给子比主题加点美化吧，本篇文章是子比主题文章封面缩略图悬停样式，我这边提供了四款，我觉得还是不错的四款悬停样式，喜欢哪个就部署哪个吧！第一款
第二款
第三款
第四款
代码部署
根据上面的演示图喜欢哪个将下面的代码放到：子比主题–>>自定义CSS样式即可，别忘了换图标！
.item-thumbnail {
position: relative;
overflow: hidden;
transition: transform 0.4s ease;
}
.item-thumbnail:hover {
transform: translateY(-5px);
}
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
padding-left: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0);
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(https://www.tfbkw.com/favicon.ico);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
transform: scale(0.8) rotate(-10deg);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
}
.item-thumbnail:hover:before {
background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.item-thumbnail:hover:after {
transform: scale(1) rotate(0deg);
opacity: 1;
animation: pulse 1.5s infinite alternate ease-in-out;
}
@keyframes pulse {
0% {
filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
}
100% {
filter: drop-shadow(0 0 15px rgba(255,255,255,0.8));
}
}
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0);
transition: background .35s;
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
padding-left: 10px
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
background: url(https://www.tfbkw.com/favicon.ico);background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
-webkit-transform: scale(2);
transform: scale(2);
transition: opacity .35s,-webkit-transform .35s;
transition: transform .35s,opacity .35s;
transition: transform .35s,opacity .35s,-webkit-transform .35s;
opacity: 0;
pointer-events: none;
}
.item-thumbnail:hover:before {
background: rgba(0,0,0,.5)
}
.item-thumbnail:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
.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 {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
background: url(https://www.tfbkw.com/favicon.ico) 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));
}
.item-thumbnail {
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
border-radius: 8px;
}
.item-thumbnail:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(66, 0, 255, 0.2) 0%, rgba(255, 0, 140, 0.2) 100%);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
padding-left: 10px;
backdrop-filter: blur(0px);
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
background: url(https://www.tfbkw.com/favicon.ico);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
transform: scale(0) translateY(20px);
transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
pointer-events: none;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}
.item-thumbnail:hover:before {
background: linear-gradient(135deg, rgba(66, 0, 255, 0.6) 0%, rgba(255, 0, 140, 0.4) 100%);
backdrop-filter: blur(3px);
box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);
}
.item-thumbnail:hover:after {
transform: scale(1) translateY(0);
opacity: 1;
animation: float 3s infinite ease-in-out, glow 2s infinite alternate;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg) scale(1);
}
50% {
transform: translateY(-10px) rotate(5deg) scale(1.05);
}
100% {
transform: translateY(0) rotate(0deg) scale(1);
}
}
@keyframes glow {
0% {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
100% {
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(66, 0, 255, 0.6));
}
}
.item-thumbnail::before {
content: '';
position: absolute;
inset: -3px;
background: linear-gradient(45deg, #ff00cc, #3300ff, #00ccff, #ff00cc);
background-size: 400% 400%;
z-index: -1;
border-radius: 10px;
opacity: 0;
transition: opacity 0.5s ease;
animation: gradientBG 6s ease infinite;
}
.item-thumbnail:hover::before {
opacity: 1;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
页:
[1]