I am trying to overlay an image on top of this css animation. I just want it to sit right in the middle of it. I have tried playing with the z-index and different positions, but I can't seem to get it to show up. I would also like to get the colors to change when the mouse moves over different spots.
body {
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
background-size: cover;
animation: animate 60s linear infinite loop;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://image.ibb.co/cbYTjf/cloud.png);
animation: animate 60s linear infinite;
z-index:1;
}
.logo{
background-image:url(https://i.vgy.me/7FcUbx.jpg)
z-index: 10;
position:absolute;
}
#keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: 1063px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Clouds </title>
<link rel="stylesheet" href="clouds.css">
</head>
<body>
<div class= "container">
</div>
<div class="background-color"></div>
<div class="clouds">
<div class="logo">
</div>
</body>
There are a number of ways you could achieve this. I would look into using a pseudo-element for the overlay or something but here is one way to do it.
The main problem that I saw was that you needed to define height and width for the logo.
Codepen if you prefer:
https://codepen.io/zenRyoku/pen/rgWNQo?editors=1100
body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
background-size: cover;
animation: animate 60s linear infinite loop;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://image.ibb.co/cbYTjf/cloud.png');
animation: animate 60s linear infinite;
z-index: 1;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
height: 20%;
width: 20%;
background: url('https://i.vgy.me/7FcUbx.jpg') center center / cover;
z-index: 10;
transform: translate(-50%, -50%);
}
#keyframes animate {
0% {
background-position: 0px;
}
100% {
background-position: 1063px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Clouds </title>
<link rel="stylesheet" href="clouds.css">
</head>
<body>
<div class="container">
<div class="clouds"></div>
<div class="logo"></div>
</div>
</body>
You can create the effect by using multiple backgrounds and applying it to the body - note that the background specified first will come on top in the stacking order. See demo below:
body {
margin: 0;
min-height: 100vh;
background: url(https://i.vgy.me/7FcUbx.jpg) center / 100px auto no-repeat,
url(https://image.ibb.co/cbYTjf/cloud.png) right / cover no-repeat,
linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%) center / cover no-repeat;
animation: animate 60s linear infinite;
}
#keyframes animate {
to {
background-position: center, left, center;
}
}
Related
I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS
I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.
How can I solve the issue there with my transition looks smooth?
I created a JSFiddle to display what I mean:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: #fff;
font: 300 2rem 'Montserrat';
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
top: -15px;
left: -15px;
background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
background-repeat: repeat;
border-radius: 5px;
background-size: 600%;
animation: border 12s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: 0% 0%;
}
100% {
background-position: 250% 250%;
}
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div class="box">
Greetings fellow developer!
</div>
Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.
Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.
body {
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
inset: -15px;
background:
repeating-linear-gradient(45deg,
#0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
#00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
border-radius: 5px;
background-size: 200% 200%;
animation: border 2s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: bottom left;
}
100% {
background-position: top right;
}
}
<div class="box">
</div>
Hello i tried out everything but don´t find the error.
I have a css gradient-animation running on my background and would like to put a mask over it. The mask consists of a circle in the centre of the screen.
I would like that the animation running in the background is only visible inside the circle.
This is my code so far:
#charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
mask-image: url(assets/images/mask.svg);
mask-repeat: no-repeat;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mask1">
<div class="background"></div>
</div>
</body>
</html>
The animation is running fine but i don´t see the mask.
Thanks for any help.
Something like this?
#charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgb(0 0 0 / 0%) 50%);
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<div class="mask1">
<div class="background"></div>
</div>
I have an image of waves that takes about the bottom third of the screen(not the background image) that I want to run on an infinite loop from right to the left but using css. I have tried different things but so far have been unable to make it work.
I have defined the img src on the HTML, but if needed i can do it on the css file.
Any help or suggestions on how to do it are appreciated.
CSS
body {
border: 2px solid black;
width: 700px;
background-image: url("./cave.jpg");
background-size: 700px 505px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
.waves {
height: 380px;
width: 700px;
position: relative;
top: -300px;
background-repeat: repeat-x;
animation: animatedImage 20s linear infinite;
}
#keyframes animatedImage {
from {background-position: 0 0;}
to {background-position: 100% 0;}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Escape the Cave</title>
<link rel="stylesheet" href="./jogo.css">
</head>
<body>
<div>
<img class="waves" src="./ondas.png">
</div>
<script src="jogo.js"></script>
</body>
</html>
I moved class "waves" on div in which image is putted, because it's easier to operate.
Here's CSS
body {
border: 2px solid black;
width: 700px;
background-image: url("./cave.jpg");
background-size: 700px 505px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
.waves {
height: 380px;
width: 700px;
position: relative;
top: -300px;
background-repeat: repeat-x;
animation: animatedImage 5s linear infinite;
}
#keyframes animatedImage {
0% { left: 0;}
50%{ left : 100%;}
100%{ left: 0;}
}
HTML
<div class="waves">
<img src="https://styles.redditmedia.com/t5_2tugi/styles/communityIcon_7yzrvmem0wi31.png">
</div>
I am trying to build a page that is divided into above-the-fold and below-the-fold sections to give the viewer an impression of going undersea. I've run into a stumbling block, because something just refuses to click in my brain when it comes to the concepts of CSS positioning.
Ultimately, I am trying to add another section below the fold where I can add content, but want the above water scene to stay full width. Currently, the content I want to appear below the fold is rendering in the above the fold section.
body {
background: #90caf9;
}
.above-water {
height: 100vh;
width: 100vw;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
.wave {
position: absolute;
width: 100%;
height: 220px;
bottom: 0;
left: 0;
background: radial-gradient(circle farthest-corner at 50% 0%, transparent 30%, #2179ea 30%, #2179ea 45%, #1d86ea 45%, #1d86ea 60%, #2a9eea 60%, #2a9eea 75%, #02b0ea 75%);
-webkit-animation: anim-h-wave 4s linear infinite, anim-v-wave 2s infinite alternate;
-moz-animation: anim-h-wave 4s linear infinite, anim-v-wave 2s infinite alternate;
animation: anim-h-wave 4s linear infinite, anim-v-wave 2s infinite alternate;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#-webkit-keyframes anim-h-wave {
0% {
background-position: -100px 0;
}
100% {
background-position: 100px 0;
}
}
#keyframes anim-h-wave {
0% {
background-position: -100px 0;
}
100% {
background-position: 100px 0;
}
}
#-webkit-keyframes anim-v-wave {
0% {
background-size: 100px 220px;
}
100% {
background-size: 100px 270px;
}
}
#keyframes anim-v-wave {
0% {
background-size: 100px 220px;
}
100% {
background-size: 100px 270px;
}
}
<section id="above-the-water">
<div class="above-water">
<div class="wave"></div>
</div>
</section>
<section id="underwater">
<div class="container">
<h1>test</h1>
</div>
</section>
If needed, the full code can be found on my pen at https://codepen.io/sabey-dc/pen/zYOdNOv
You've got to add margin-top: 100vh to the underwater section because since the above water has absolute positioning, it won't push the underwater content down on its own.
This question already has an answer here:
Background-image in keyframe does not display in Firefox or Internet Explorer
(1 answer)
Closed 5 years ago.
I need help to make animation like linear gradient using CSS that ends with transparent color on image..
This is an example (if Possible):
Current effect achieved by creating linear gradient transparent-white-transparent and moving background forward/back on :hover.
here's solution for placing image under this animation. but please keep in mind endless animation might be very distractive and annoying for your users
.wrapper {
position: relative;
width: 350px;
height: 150px;
/*border: 2px solid #444;*/
border-radius: 10px;
overflow: hidden;
}
img {
position: relative;
z-index: 0;
width: 100%;
}
.gradient {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
font: 0;
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gradient {
background-image: linear-gradient(to top, transparent 0%, white 51%, transparent 100%);
background-position: center bottom;
}
.gradient:hover {
background-position: center top;
}
.gradient.animated {
animation: gradient 2s infinite;
}
#keyframes gradient {
0% {
background-position: center bottom;
}
50% {
background-position: center top;
}
100% {
background-position: center bottom;
}
}
<div class='wrapper'>
<div href='#' class='gradient'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
<div class='wrapper'>
<div href='#' class='gradient animated'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
and simplier example for better understanding
you can find more in article below
w3schools about CSS3 Gradients
.gradiented {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
width: 200px;
height: 200px;
}
.gradiented {
background-image: linear-gradient(to top, #283048 0%, #859398 51%, #283048 100%);
background-position: center bottom;
}
.gradiented:hover {
background-position: center top;
}
<div href='#' class='gradiented'></div>