.dipl_image_hover_effect_inner {
overflow: hidden;
position: relative;
display: inline-block;
border: 0 solid #000000;
}
.dipl_image_hover_effect_inner:hover {
opacity: 1;
} .dipl_image_hover_effect_inner img{
display: block;
height: auto;
border: 0 solid #000000;
} .dipl_image_hover_effect_inner.circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
z-index: 2;
}
.dipl_image_hover_effect_inner.circle:hover::before {
animation: dipl_circleIn 0.5s forwards ease-out;
}
.dipl_image_hover_effect_inner.circle:not(:hover)::before {
animation: dipl_circleOut 0.5s forwards ease-in;
}
@keyframes dipl_circleIn {
0% { width: 150%; height: 150%; }
100% { width: 0; height: 0; background: rgba(255, 255, 255, 0.5); }
}
@keyframes dipl_circleOut {
0% { width: 0; height: 0; background: rgba(0, 0, 0); }
100% { width: 150%; height: 150%; background: rgba(0, 0, 0, 0); }
} .dipl_image_hover_effect_inner.zoom img {
transform: scale(1);
transition: transform 0.5s ease-in-out;
transform-origin: center center;
}
.dipl_image_hover_effect_inner.zoom:hover img {
transform: scale(1.3);
} .dipl_image_hover_effect_inner.rotate img {
transition: transform 0.5s ease-in-out;
}
.dipl_image_hover_effect_inner.rotate:hover img {
transform: rotate(-4deg) scale(1.1);
transition: 0.8s ease-in-out;
}
.dipl_image_hover_effect_inner.rotate::before {
content: '';
position: absolute;
width: 0;
height: 0;
background: rgba(0, 0, 0, 0.7);
top: -50%;
right: -50%;
transform: translate(0%, 0%);
border-radius: 100%;
opacity: 0;
z-index: 2;
display: block;
transition: transform 0.4s ease;
}
.dipl_image_hover_effect_inner.rotate:hover::before {
animation: dipl_rotateIn 0.8s forwards ease-out;
}
.dipl_image_hover_effect_inner.rotate:not(:hover)::before {
animation: dipl_rotateOut 0.55s forwards ease-in;
}
@keyframes dipl_rotateIn {
0% { opacity: 1; width: 200%; height: 200%; }
100% { opacity: 0; }
}
@keyframes dipl_rotateOut {
0% { opacity: 1; }
100% { opacity: 0; width: 200%; height: 200%; }
} .dipl_image_hover_effect_inner.filter:hover img {
animation: dipl_filterIn 0.5s forwards ease-out;
}
@keyframes dipl_filterIn {
0% { filter: brightness(400%) saturate(200%) hue-rotate(100deg); }
25% { filter: brightness(100%) saturate(100%) hue-rotate(100deg); }
} .dipl_image_hover_effect_inner.flash,
.dipl_image_hover_effect_inner.flash_rev,
.dipl_image_hover_effect_inner.flash_inst_rev {
position: relative;
}
.dipl_image_hover_effect_inner.flash::before,
.dipl_image_hover_effect_inner.flash_rev::before,
.dipl_image_hover_effect_inner.flash_inst_rev::before {
content: '';
position: absolute;
width: 50%;
height: 100%;
top: 0;
z-index: 2;
display: block;
}
.dipl_image_hover_effect_inner.flash::before {
background: linear-gradient(to right, rgba(255, 255, 250, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
left: -75%;
}
.dipl_image_hover_effect_inner.flash:hover::before {
animation: dipl_flashIN 0.8s forwards ease-out;
}
@keyframes dipl_flashIN {
100% { left: 125%; }
}
.dipl_image_hover_effect_inner.flash:not(:hover)::before {
animation: dipl_flashOut 0.5s forwards ease-in;
}
@keyframes dipl_flashOut {
0% { left: 125%; }
} .dipl_image_hover_effect_inner.flash_inst_rev {
display: inline-block;
transform: scaleX(1);
}
.dipl_image_hover_effect_inner.flash_inst_rev:hover {
transform: scaleX(-1);
}
.dipl_image_hover_effect_inner.flash_inst_rev::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
right: -75%;
}
.dipl_image_hover_effect_inner.flash_inst_rev:hover::before {
animation: dipl_flashinstrevIn1 0.5s forwards ease-out, dipl_flashinstrevIn2 0.5s forwards ease-in 0.4s;
}
@keyframes dipl_flashinstrevIn1 { 100% { right: 125%; } }
@keyframes dipl_flashinstrevIn2 { 100% { right: -125%; } }
.dipl_image_hover_effect_inner.flash_inst_rev:not(:hover)::before {
animation: dipl_flashinstrevOut1 0.5s forwards ease-out, dipl_flashinstrevOut2 0.5s forwards ease-in 0.4s;
}
@keyframes dipl_flashinstrevOut1 { 100% { right: 125%; } }
@keyframes dipl_flashinstrevOut2 { 100% { right: -125%; } } .dipl_image_hover_effect_inner.flash.filter:hover img,
.dipl_image_hover_effect_inner.flash_rev.filter:hover img,
.dipl_image_hover_effect_inner.flash_inst_rev.filter:hover img {
animation: dipl_flashfilterIn 0.25s forwards ease-out;
}
@keyframes dipl_flashfilterIn {
0% { filter: brightness(150%) saturate(150%) hue-rotate(100deg); }
15% { filter: brightness(100%) saturate(100%) hue-rotate(100deg); }
} .dipl_image_hover_effect_inner.diagonal::before,
.dipl_image_hover_effect_inner.diagonal::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 2;
opacity: 1;
transition: all 0.5s;
}
.dipl_image_hover_effect_inner.diagonal::before {
clip-path: polygon(0 0, 0% 100%, 100% 0);
transform: rotate(-90deg);
transform-origin: left bottom;
}
.dipl_image_hover_effect_inner.diagonal::after {
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
top: 0;
transform: rotate(-90deg);
transform-origin: top right;
}
.dipl_image_hover_effect_wrapper.dipl-effect-diagonal:hover .dipl_image_hover_effect_inner.diagonal::before {
transform: rotate(0deg);
background: rgba(255, 255, 255, 0);
}
.dipl_image_hover_effect_wrapper.dipl-effect-diagonal:hover .dipl_image_hover_effect_inner.diagonal::after {
transform: rotate(0deg);
background: rgba(255, 255, 255, 0);
} .dipl-glitch-image {
transition: transform 0.4s ease;
}
.dipl-glitch-image:hover {
transform: scale(0.95);
transition: transform 1.5s ease;
}
.dipl-glitch-image::before {
content: '';
position: absolute;
width: 100%;
height: 15%;
left: 0;
bottom: 0;
background-size: cover;
background-position: center;
filter: blur(1px);
z-index: 2;
pointer-events: none;
opacity: 0;
}
.dipl-glitch-image:hover::before {
animation: dipl_glitchUpIn 0.8s forwards ease-out;
opacity: 1;
}
.dipl-glitch-image:not(:hover)::before {
animation: dipl_glitchDownOut 0.4s forwards ease-in;
opacity: 1;
}
@keyframes dipl_glitchUpIn {
0% { transform: translateY(0); }
100% { transform: translateY(-800%); }
}
@keyframes dipl_glitchDownOut {
0% { transform: translateY(-600%); opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
} .dipl-slide-glitch{
background-color: #000;
background-repeat: no-repeat;
position: relative;
}
.dipl-slide-glitch::before,
.dipl-slide-glitch::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: cover;
background-position: center;
opacity: 0;
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
animation: dipl_glitchRGB 0.6s steps(2, end) infinite;
}
.dipl-slide-glitch::before {
filter: contrast(200%) hue-rotate(270deg);
}
.dipl-slide-glitch::after {
filter: contrast(200%) hue-rotate(90deg);
}
.dipl-slide-glitch:hover::before,
.dipl-slide-glitch:hover::after {
opacity: 0.2;
}
@keyframes dipl_glitchRGB{
0%   { transform: translate( 0, 0 ); }
20%  { transform: translate( -2px, -2px ); }
40%  { transform: translate( 2px, 2px ); }
60%  { transform: translate( -1px, 2px ); }
80%  { transform: translate( 1px, -1px ); }
100% { transform: translate( 0, 0 ); }
}
.dipl-slide-glitch-overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 3;
}
.dipl-slide-glitch-overlay .quadrant{
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: none;
opacity: 1;
transition: all 0.25s ease;
}
.dipl-slide-glitch-overlay .quad1{
clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
transform: translateX(-100%);
transition-delay: 0s;
}
.dipl-slide-glitch-overlay .quad2{
clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
transform: translateY(-100%);
transition-delay: 0.5s;
}
.dipl-slide-glitch-overlay .quad3{
clip-path: polygon(0 50%, 50% 50%, 50% 100%, 0 100%);
transform: translateY(100%);
transition-delay: 0.75s;
}
.dipl-slide-glitch-overlay .quad4{
clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
transform: translateX(100%);
transition-delay: 1s;
}
.dipl-slide-glitch:hover .quadrant {
transform: translate(0, 0);
opacity: 1;
}
.dipl-slide-glitch:hover .quad1,
.dipl-slide-glitch:hover .quad2,
.dipl-slide-glitch:hover .quad3,
.dipl-slide-glitch:hover .quad4 {
backdrop-filter: saturate(200%);
}