Mixing
How to apply CSS animation only on a single image when there are multiple images?
0
I need to apply "fadeInOut" animation to my CSS code. I have two images in the background, positioned on top of each other. I have used CSS keyframes to define two states - one with top image opaque, one with it transparent. How do I get this only on the first (top) image and not on both?
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg), url(../img/2.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
Below is the html code.
<section id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</section>
I want only the first image to get transparent, so that the second image is visible and so on. Please help.
html css animation css-animations keyframe
asked Jan 2 at 5:12
user9020357user9020357
53
add a comment |
0
I need to apply "fadeInOut" animation to my CSS code. I have two images in the background, positioned on top of each other. I have used CSS keyframes to define two states - one with top image opaque, one with it transparent. How do I get this only on the first (top) image and not on both?
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg), url(../img/2.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
Below is the html code.
<section id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</section>
I want only the first image to get transparent, so that the second image is visible and so on. Please help.
html css animation css-animations keyframe
asked Jan 2 at 5:12
user9020357user9020357
53
1
Add the relevant html code too!
– Viira
Jan 2 at 5:23
you can take the top image in the<img>tag and then apply fadeInOut animation on it.
– Bhuwan
Jan 2 at 5:50
add a comment |
0
0
0
I need to apply "fadeInOut" animation to my CSS code. I have two images in the background, positioned on top of each other. I have used CSS keyframes to define two states - one with top image opaque, one with it transparent. How do I get this only on the first (top) image and not on both?
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg), url(../img/2.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
Below is the html code.
<section id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</section>
I want only the first image to get transparent, so that the second image is visible and so on. Please help.
html css animation css-animations keyframe
asked Jan 2 at 5:12
user9020357user9020357
53
I need to apply "fadeInOut" animation to my CSS code. I have two images in the background, positioned on top of each other. I have used CSS keyframes to define two states - one with top image opaque, one with it transparent. How do I get this only on the first (top) image and not on both?
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg), url(../img/2.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
Below is the html code.
<section id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</section>
I want only the first image to get transparent, so that the second image is visible and so on. Please help.
html css animation css-animations keyframe
html css animation css-animations keyframe
asked Jan 2 at 5:12
user9020357user9020357
53
asked Jan 2 at 5:12
user9020357user9020357
53
edited Jan 2 at 5:44
user9020357
asked Jan 2 at 5:12
user9020357user9020357
53
asked Jan 2 at 5:12
user9020357user9020357
53
asked Jan 2 at 5:12
user9020357user9020357
53
53
1
Add the relevant html code too!
– Viira
Jan 2 at 5:23
you can take the top image in the<img>tag and then apply fadeInOut animation on it.
– Bhuwan
Jan 2 at 5:50
add a comment |
1
Add the relevant html code too!
– Viira
Jan 2 at 5:23
you can take the top image in the<img>tag and then apply fadeInOut animation on it.
– Bhuwan
Jan 2 at 5:50
1
1
Add the relevant html code too!
– Viira
Jan 2 at 5:23
Add the relevant html code too!
– Viira
Jan 2 at 5:23
you can take the top image in the
<img> tag and then apply fadeInOut animation on it.– Bhuwan
Jan 2 at 5:50
you can take the top image in the
<img> tag and then apply fadeInOut animation on it.– Bhuwan
Jan 2 at 5:50
add a comment |
1 Answer
1
active
oldest
votes
0
You can try something like
HTML
<section>
<div id="bgimg">
<div id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</div>
</div>
</section>
CSS
#bgimg{
background: url(../img/2.jpg);
width:100%;
height:100%;
}
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001506%2fhow-to-apply-css-animation-only-on-a-single-image-when-there-are-multiple-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can try something like
HTML
<section>
<div id="bgimg">
<div id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</div>
</div>
</section>
CSS
#bgimg{
background: url(../img/2.jpg);
width:100%;
height:100%;
}
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
add a comment |
0
You can try something like
HTML
<section>
<div id="bgimg">
<div id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</div>
</div>
</section>
CSS
#bgimg{
background: url(../img/2.jpg);
width:100%;
height:100%;
}
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
add a comment |
0
0
0
You can try something like
HTML
<section>
<div id="bgimg">
<div id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</div>
</div>
</section>
CSS
#bgimg{
background: url(../img/2.jpg);
width:100%;
height:100%;
}
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
You can try something like
HTML
<section>
<div id="bgimg">
<div id="hero">
<div class="hero-logo">
<img class="" src="img/logo.png" alt="img_logo">
</div>
<div class="actions">
<a href="#about" class="btn-get-started">Get Strated</a>
<a href="#services" class="btn-services">Our Services</a>
</div>
</div>
</div>
</section>
CSS
#bgimg{
background: url(../img/2.jpg);
width:100%;
height:100%;
}
#hero {
width: 100%;
height: 100vh;
background: url(../img/1.jpg);
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
@keyframes cf3FadeInOut {
0% {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
answered Jan 2 at 6:20
RAGINROSERAGINROSE
16718
16718
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001506%2fhow-to-apply-css-animation-only-on-a-single-image-when-there-are-multiple-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Add the relevant html code too!
– Viira
Jan 2 at 5:23
you can take the top image in the
<img>tag and then apply fadeInOut animation on it.– Bhuwan
Jan 2 at 5:50