Background Animate (hover/press)
How do I make an background animate (hover/press)?
What is a background animate (hover/press)? How do you make a background animate (hover/press)? This script and codes were developed by Jakob-e on 04 July 2022, Monday.
Background Animate (hover/press) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Background Animate (hover/press)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="img-1 animate zoom-in"></div>
<div class="img-2 animate zoom-out"></div>
<div class="img-3 animate fade-in"></div>
<div class="img-4 animate fade-out"></div>
<div class="img-5 animate fade-in-zoom-in"></div>
<div class="img-6 animate fade-out-zoom-out"></div> <script src="js/index.js"></script>
</body>
</html>
Background Animate (hover/press) - Script Codes CSS Codes
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { margin: 0 0 4vw;
}
body:after { content: ''; display: table; clear: both;
}
* { -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
div { position: relative; overflow: hidden; cursor: pointer; margin: 4vw 0 0 4vw; width: 44vw; height: 25vw; float: left; border: 1px solid;
}
.img-1 { background: black url("//unsplash.it/960/540/?random=1") no-repeat center/0;
}
.img-2 { background: black url("//unsplash.it/960/540/?random=2") no-repeat center/0;
}
.img-3 { background: black url("//unsplash.it/960/540/?random=3") no-repeat center/0;
}
.img-4 { background: black url("//unsplash.it/960/540/?random=4") no-repeat center/0;
}
.img-5 { background: black url("//unsplash.it/960/540/?random=5") no-repeat center/0;
}
.img-6 { background: black url("//unsplash.it/960/540/?random=6") no-repeat center/0;
}
.animate:after { -webkit-transition: all 1s; transition: all 1s; -webkit-transform-origin: center; transform-origin: center; content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; background-size: cover;
}
.zoom-in.js-press:after,
.zoom-in:hover:after { -webkit-transform: scale(1.1); transform: scale(1.1);
}
.zoom-out:after { -webkit-transform: scale(1.1); transform: scale(1.1);
}
.zoom-out.js-press:after,
.zoom-out:hover:after { -webkit-transform: scale(1); transform: scale(1);
}
.fade-in:after { opacity: 0.6;
}
.fade-in.js-press:after,
.fade-in:hover:after { opacity: 1;
}
.fade-out.js-press:after,
.fade-out:hover:after { opacity: 0.6;
}
.fade-in-zoom-in:after { opacity: 0.3; -webkit-transform: scale(2); transform: scale(2);
}
.fade-in-zoom-in.js-press:after,
.fade-in-zoom-in:hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);
}
.fade-out-zoom-out:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);
}
.fade-out-zoom-out.js-press:after,
.fade-out-zoom-out:hover:after { opacity: 0.3; -webkit-transform: scale(2); transform: scale(2);
}
@media (max-width: 540px) { div { width: 92vw; height: 40vw; }
}
@media (pointer: coarse) { .zoom-in:not(.js-press):hover:after { -webkit-transform: scale(1); transform: scale(1); } .zoom-out:not(.js-press):hover:after { -webkit-transform: scale(1.1); transform: scale(1.1); } .fade-in:not(.js-press):hover:after { opacity: 0.6; } .fade-out:not(.js-press):hover:after { opacity: 1; } .fade-in-zoom-in:not(.js-press):hover:after { opacity: 0.3; -webkit-transform: scale(2); transform: scale(2); } .fade-out-zoom-out:not(.js-press):hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
Background Animate (hover/press) - Script Codes JS Codes
// press class quickie for touch devices (don't do this)
var forEach = function(a,c,s){for(var i=0,l=a.length; i<l;++i){c.call(s,i,a[i]);}};
var divs = document.querySelectorAll('div');
forEach(divs,function(i,d){d.addEventListener('touchstart',function(e){this.classList.add('js-press');});});
document.body.addEventListener('touchend',function(e){forEach(divs,function(i,d){d.classList.remove('js-press');})});
Developer | Jakob-e |
Username | jakob-e |
Uploaded | July 04, 2022 |
Rating | 4.5 |
Size | 3,484 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Angular toggle password directive | 4,356 Kb |
SCSS z-index | 7,745 Kb |
Profile Top | 8,420 Kb |
Maintain aspect ratio or fit to content | 2,136 Kb |
Responsive Font Sizing | 7,776 Kb |
Encode SVG SCSS | 14,772 Kb |
SVG Path Circle | 2,166 Kb |
CSS Shapes | 14,064 Kb |
Navigation highlighting using waypoints.js | 6,689 Kb |
Responsive Aspect-Ratio SCSS Mixin | 8,503 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Jay | Jaycode | 3,784 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
React TODO | Enieste | 3,320 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Speech bubbles | Something | 1,547 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
RSW | JordanC | 3,726 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!