JavaScript Image Effects
// Get the image element
const image = document.getElementById('image');
// Define the flash and glitch effect functions
function flashEffect() {
// Add a flash effect to the image
image.classList.add('flash');
setTimeout(() => {
image.classList.remove('flash');
}, 500); // Remove the flash effect after 500ms
function glitchEffect() {
// Add a glitch effect to the image
image.classList.add('glitch');
setTimeout(() => {
image.classList.remove('glitch');
}, 1000); // Remove the glitch effect after 1000ms
// Add event listeners to trigger the effects
image.addEventListener('mouseover', flashEffect);
image.addEventListener('mouseout', glitchEffect);
/* Flash effect */
.flash {
animation: flash-animation 0.5s ease-in-out;
@keyframes flash-animation {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
/* Glitch effect */
.glitch {
animation: glitch-animation 1s steps(5, end);
@keyframes glitch-animation {
0% { transform: translate(0); }
20% { transform: translate(-10px, -10px); }
40% { transform: translate(10px, 10px); }
60% { transform: translate(-5px, 5px); }
80% { transform: translate(5px, -5px); }
100% { transform: translate(0); }
