Skip to content

Instantly share code, notes, and snippets.

@tojibon

tojibon/index.html

Created May 5, 2015 12:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tojibon/2cf19abf3735ab69402b to your computer and use it in GitHub Desktop.
Save tojibon/2cf19abf3735ab69402b to your computer and use it in GitHub Desktop.
Download ZIP
CSS Image Zoom and Overlay Color Animation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>CSS Background Color Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="masthead" class="site-header" role="banner">
<div class="banner-wrap">
<picture>
<source srcset="./img/l.jpg" media="(min-width: 1600px)">
<source srcset="./img/m.jpg" media="(min-width: 1150px)">
<source srcset="./img/s.jpg" media="(min-width: 720px)">
<img class="bg-image" srcset="./img/xs.jpg" alt="">
</picture>
<span class="overlay"></span>
</div>
</header>
</body>
</html>
Raw
style.css
body {
padding: 0;
margin: 0;
border: 0;
}
.site-header {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.banner-wrap {
display: block;
overflow: hidden;
}
.bg-image {
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100vh;
top: 0;
left: 0;
bottom: 0;
right: 0;
-moz-animation: zoominout 10s linear alternate infinite;
-webkit-animation: zoominout 10s linear alternate infinite;
animation: zoominout 10s linear alternate infinite;
}
@-webkit-keyframes zoominout {
0% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1.2); }
}
@keyframes zoominout {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
.overlay {
display: block;
position: absolute;
z-index: 2;
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(100deg,#24C6DC,#514A9D);
background: linear-gradient(100deg,#24C6DC,#514A9D);
-webkit-animation: overlaycolor 10s infinite linear;
animation: overlaycolor 10s infinite linear;
-webkit-perspective: 1000;
opacity: 0.65;
}
@-webkit-keyframes overlaycolor {
from { -webkit-filter: hue-rotate(0deg); }
to { -webkit-filter: hue-rotate(-360deg); }
}
@keyframes overlaycolor {
from { -webkit-filter: hue-rotate(0deg); }
to { -webkit-filter: hue-rotate(-360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment