864 lines
15 KiB
CSS
864 lines
15 KiB
CSS
.hover-zoom {
|
|
overflow: hidden;
|
|
}
|
|
.hover-zoom img {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-zoom:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.hover-tilt {
|
|
overflow: hidden;
|
|
}
|
|
.hover-tilt img {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-tilt:hover img {
|
|
transform: scale(1.04) rotate(1deg);
|
|
}
|
|
|
|
.hover-blur img {
|
|
filter: blur(2px);
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.hover-blur:hover img {
|
|
filter: blur(0);
|
|
}
|
|
|
|
.hover-blur-invert img {
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.hover-blur-invert:hover img {
|
|
filter: blur(2px);
|
|
}
|
|
|
|
.hover-darken img {
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.hover-darken:hover img {
|
|
filter: brightness(0.85);
|
|
}
|
|
|
|
.hover-lighten img {
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.hover-lighten:hover img {
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.hover-lift {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.hover-overlay {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-overlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.hover-overlay:hover::after {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.hover-border {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-border:hover {
|
|
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3);
|
|
}
|
|
|
|
.hover-colorize img {
|
|
filter: grayscale(100%);
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
.hover-colorize:hover img {
|
|
filter: grayscale(0%);
|
|
}
|
|
|
|
.hover-slide {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-slide::after {
|
|
content: attr(data-caption);
|
|
position: absolute;
|
|
bottom: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
background: rgba(0,0,0,0.6);
|
|
color: white;
|
|
text-align: center;
|
|
padding: 0.5em;
|
|
font-size: 0.9em;
|
|
transition: bottom 0.3s ease;
|
|
}
|
|
|
|
.hover-slide:hover::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
.hover-dezoom img {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-dezoom:hover img {
|
|
transform: scale(.95);
|
|
}
|
|
|
|
.hover-slide-left img, .hover-slide-right img {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.hover-slide-left:hover img {
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
.hover-slide-right:hover img {
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.hover-fade-zoom img {
|
|
opacity: 0.9;
|
|
transform: scale(1);
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
}
|
|
|
|
.hover-fade-zoom:hover img {
|
|
opacity: 1;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.hover-frosted img {
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.hover-frosted:hover img {
|
|
filter: blur(1px) brightness(1.2);
|
|
}
|
|
|
|
.hover-underline {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-underline::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 4px;
|
|
background: #007cba;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hover-underline:hover::after {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.hover-desaturate img {
|
|
filter: grayscale(0%);
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
.hover-desaturate:hover img {
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.hover-glow {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 15px rgba(255, 225, 0, 0.3);
|
|
}
|
|
|
|
.hover-polaroid {
|
|
background: white;
|
|
padding: 4px;
|
|
border: 1px solid #eee;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-polaroid:hover {
|
|
transform: translateY(-5px) rotate(-1deg);
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.hover-caption {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-caption::after {
|
|
content: attr(data-caption);
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0,0,0,0.5);
|
|
color: white;
|
|
font-size: 1.1em;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.hover-caption:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-zoom-overlay {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-zoom-overlay img {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-zoom-overlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.hover-zoom-overlay:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.hover-zoom-overlay:hover::after {
|
|
background: rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.hover-fadeout img {
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.hover-fadeout:hover img {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.hover-wiggle:hover img {
|
|
animation: wiggle 0.4s ease-in-out;
|
|
}
|
|
|
|
@keyframes wiggle {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
25% { transform: rotate(0.8deg); }
|
|
75% { transform: rotate(-0.8deg); }
|
|
}
|
|
|
|
.hover-rotateY img {
|
|
transition: transform 0.6s ease;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.hover-rotateY:hover img {
|
|
transform: rotateY(8deg);
|
|
}
|
|
|
|
.hover-shine {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-shine::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -75%;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
120deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
transform: skewX(-20deg);
|
|
transition: left 0.75s ease;
|
|
}
|
|
|
|
.hover-shine:hover::before {
|
|
left: 125%;
|
|
}
|
|
|
|
.hover-mask {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-mask::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0);
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s ease, background 0.3s ease;
|
|
}
|
|
|
|
.hover-mask:hover::after {
|
|
transform: translateY(0);
|
|
background: rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.hover-vignette img {
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
.hover-vignette:hover img {
|
|
filter: brightness(1.1) contrast(1.05) saturate(1.1) drop-shadow(0 0 15px rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.hover-halo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-halo::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle, rgba(255,255,255,0) 40%, rgba(255,255,255,0.3) 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.hover-halo:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-lift-up {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-lift-up:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.hover-outline-glow {
|
|
position: relative;
|
|
transition: box-shadow 0.4s ease;
|
|
}
|
|
|
|
.hover-outline-glow:hover {
|
|
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 15px rgba(0, 150, 255, 0.3);
|
|
}
|
|
|
|
.hover-tint {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-tint::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(45deg, rgba(0,123,255,0) 0%, rgba(0,123,255,0.25) 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.hover-tint:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-grain img {
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.hover-grain:hover img {
|
|
filter: contrast(1.1) brightness(1.05) saturate(1.05);
|
|
background-blend-mode: multiply;
|
|
}
|
|
|
|
.hover-slide-up {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-slide-up img {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-slide-up:hover img {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.hover-frame {
|
|
position: relative;
|
|
}
|
|
|
|
.hover-frame::before,
|
|
.hover-frame::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: #fff;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.hover-parallax {
|
|
overflow: hidden;
|
|
perspective: 700px;
|
|
}
|
|
|
|
.hover-parallax img {
|
|
transition: transform 0.3s ease;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.hover-parallax:hover img {
|
|
transform: rotateY(3deg) rotateX(2deg) scale(1.03);
|
|
}
|
|
|
|
.hover-ripple {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-ripple::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.5s ease, height 0.5s ease, opacity 0.6s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hover-ripple:hover::after {
|
|
width: 200%;
|
|
height: 200%;
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-glass {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-glass::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(120deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 70%);
|
|
mix-blend-mode: overlay;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.hover-glass:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-window {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-window img {
|
|
transition: transform 0.4s ease, clip-path 0.4s ease;
|
|
clip-path: inset(0);
|
|
}
|
|
|
|
.hover-window:hover img {
|
|
clip-path: inset(5% 5%);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.hover-diagonal {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-diagonal::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.3);
|
|
transform: skewY(-10deg);
|
|
transition: top 0.4s ease;
|
|
}
|
|
|
|
.hover-diagonal:hover::before {
|
|
top: 0;
|
|
}
|
|
|
|
.hover-analog img {
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
.hover-analog:hover img {
|
|
filter: contrast(1.15) brightness(1.05) saturate(1.1) sepia(0.1);
|
|
}
|
|
|
|
.hover-shutter {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
.hover-shutter img {
|
|
transition: clip-path 0.6s ease;
|
|
clip-path: circle(80% at center);
|
|
}
|
|
|
|
.hover-shutter:hover img {
|
|
clip-path: circle(35% at center);
|
|
}
|
|
|
|
.hover-mist {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-mist::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 70%);
|
|
opacity: 0;
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
|
|
.hover-mist:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-sunset img {
|
|
transition: filter 0.4s ease;
|
|
}
|
|
|
|
.hover-sunset:hover img {
|
|
filter: sepia(0.3) saturate(1.2) hue-rotate(-10deg);
|
|
}
|
|
|
|
.hover-spotlight {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-spotlight img {
|
|
display: block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.hover-spotlight:hover img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.hover-spotlight .spotlight-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(255, 255, 255, 0),
|
|
rgba(0, 0, 0, 0.4) 70%
|
|
);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
|
|
.hover-fracture {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-fracture img {
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-fracture::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: inherit;
|
|
background-attachment: fixed;
|
|
mix-blend-mode: screen;
|
|
transform: translate(5px, -5px);
|
|
opacity: 0;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.hover-fracture:hover img {
|
|
transform: translate(-3px, 3px);
|
|
}
|
|
|
|
.hover-fracture:hover::after {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.hover-morph img {
|
|
border-radius: 12px;
|
|
transition: border-radius 0.6s ease, transform 0.6s ease;
|
|
}
|
|
|
|
.hover-morph:hover img {
|
|
border-radius: 40% 60% 50% 70% / 60% 50% 70% 40%;
|
|
}
|
|
|
|
.hover-grid {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-grid::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px),
|
|
repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px);
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.hover-grid:hover::after {
|
|
opacity: 1;
|
|
animation: gridMove 3s linear infinite;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
to { background-position: 40px 40px; }
|
|
}
|
|
|
|
.hover-freeze {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-freeze img {
|
|
transition: filter 0.5s ease;
|
|
}
|
|
|
|
.hover-freeze:hover img {
|
|
filter: grayscale(.7) brightness(1.2) sepia(0.2);
|
|
}
|
|
|
|
.hover-freeze::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 2px solid rgba(255,255,255,0);
|
|
transition: border-color 0.5s ease;
|
|
}
|
|
|
|
.hover-freeze:hover::after {
|
|
border-color: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.hover-pixelate img {
|
|
transition: filter 0.4s ease;
|
|
}
|
|
.hover-pixelate:hover img {
|
|
image-rendering: pixelated;
|
|
filter: contrast(1.1);
|
|
}
|
|
|
|
.hover-waveflow img {
|
|
transform-origin: center;
|
|
animation: none;
|
|
}
|
|
.hover-waveflow:hover img {
|
|
animation: waveflow 1.2s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes waveflow {
|
|
0% { transform: rotate(0.4deg) translateY(1px); }
|
|
100% { transform: rotate(-0.4deg) translateY(-1px); }
|
|
}
|
|
|
|
.hover-prism img {
|
|
transition: filter 0.3s ease;
|
|
}
|
|
.hover-prism:hover img {
|
|
filter: contrast(1.1) saturate(1.2) drop-shadow(2px 0 red) drop-shadow(-2px 0 cyan);
|
|
}
|
|
|
|
.hover-vibrate:hover img {
|
|
animation: vibrate 0.5s linear infinite;
|
|
}
|
|
@keyframes vibrate {
|
|
0% { transform: translate(0); }
|
|
25% { transform: translate(-1px, 1px); }
|
|
50% { transform: translate(1px, -1px); }
|
|
75% { transform: translate(-1px, -1px); }
|
|
100% { transform: translate(1px, 1px); }
|
|
}
|
|
|
|
.hover-scan {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hover-scan::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
|
|
transform: translateY(-100%);
|
|
}
|
|
.hover-scan:hover::before {
|
|
animation: scanline 1s linear;
|
|
}
|
|
@keyframes scanline {
|
|
0% { transform: translateY(-100%); }
|
|
100% { transform: translateY(200%); }
|
|
}
|
|
|
|
.hover-glitch img {
|
|
transition: transform 0.1s;
|
|
}
|
|
.hover-glitch:hover img {
|
|
animation: glitch .3s steps(2, end) infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% { clip-path: inset(10% 0 90% 0); transform: translate(2px); }
|
|
20% { clip-path: inset(80% 0 10% 0); transform: translate(-2px); }
|
|
40% { clip-path: inset(30% 0 60% 0); transform: translate(1px, -1px); }
|
|
60% { clip-path: inset(50% 0 30% 0); transform: translate(-1px, 1px); }
|
|
80% { clip-path: inset(40% 0 40% 0); transform: translate(0); }
|
|
100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
|
}
|
|
|
|
.hover-tilt3d {
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.hover-twist img {
|
|
transition: transform 0.6s ease;
|
|
transform-origin: center;
|
|
}
|
|
.hover-twist:hover img {
|
|
transform: perspective(1300px) rotateY(10deg);
|
|
}
|
|
|
|
.hover-fog {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hover-fog::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url('https://assets.codepen.io/13471/fog.png') repeat;
|
|
mix-blend-mode: screen;
|
|
opacity: 0;
|
|
animation: fog-move 10s linear infinite;
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
.hover-fog:hover::after {
|
|
opacity: 0.5;
|
|
}
|
|
@keyframes fog-move {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 1000px 0; }
|
|
}
|
|
|
|
.hover-ripple-animate {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
}
|
|
|
|
.hover-ripple-animate::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.3);
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.ripple-effect {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translate(-50%, -50%) scale(0);
|
|
animation: ripple-wave 0.6s ease-out forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes ripple-wave {
|
|
to {
|
|
transform: translate(-50%, -50%) scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hover-lens {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
cursor: none;
|
|
}
|
|
.hover-lens img {
|
|
transition: filter 0.4s ease;
|
|
cursor: none!important;
|
|
}
|
|
.hover-lens:hover img {
|
|
filter: brightness(0.6) blur(2px);
|
|
}
|
|
.hover-lens:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-lens::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 170px;
|
|
height: 170px;
|
|
top: calc(var(--lens-y, 50px) - 60px);
|
|
left: calc(var(--lens-x, 50px) - 60px);
|
|
border-radius: 50%;
|
|
background-image: var(--lens-bg);
|
|
background-repeat: no-repeat;
|
|
background-size: 250%;
|
|
background-position: var(--lens-pos);
|
|
opacity: var(--hover, 0);
|
|
transition: opacity 0.2s ease;
|
|
pointer-events: none;
|
|
} |