This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 8 months ago.
I want to have a background image fade in from invisible opacity, to 50% opacity, and stay there.
There was a similar question asked here, but I did not follow along at all, seems complicated. Maybe it'll help someone with my similar issue.
I just want to use CSS only if possible, no JS. This is what I have so far in my style.css:
body {
background-image: url("img/me.png");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
}
#keyframes fadeInBG {
0% { opacity: 0.0; }
100% { opacity: 0.5; }
}
You will want to change the image url to something else for your testing. Right now, it's applying the animation to the entire page body (including any text on the page), and not touching the background at all, background is always 100% with no animation. The simple text I have in my html file just says:
<h1> Hello world! </h1>
...which DOES do the animation. How can I direct the animation logic to the background image only? I wish you could designate body.background-image instead of body and it would be solved.
Another thing I noticed is that, once the animation is done, the text "jumps" to 100% opacity, it doesn't stay at 50% like I have it set as above. How to fix that?
Just add the code below in your CSS code.
body {
animation-fill-mode: forwards;
}
Useful link: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Also, I suggest you add a div to achieve it.
.bg-img {
background-image: url("https://media.istockphoto.com/photos/ginger-cat-portrait-picture-id1290233518?b=1&k=20&m=1290233518&s=170667a&w=0&h=C-eVqPpxcxCFqJsykl4rTzq0Kl995ZHCaLB9BgSgEzk=");
background-color: #cccccc;
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
animation: fadeInBG 5s;
/* add */
animation-fill-mode: forwards;
position: fixed;
inset: 0;
z-index: -1;
}
#keyframes fadeInBG {
0% {
opacity: 0;
}
100% {
opacity: 0.5;
}
}
<h1> Hello world! </h1>
<div class="bg-img"></div>
I am making an HTML Application (hta) on windows. I went to make a linear gradient background transition, when I realized that gradients don't have any transitions, but I decided that I would put my mind to it and do it anyway. I had made a simple animation, but when I opened the app, it worked! I have to say IE has the transition I want for linear gradients. This is what I want my background to be:
body {
animation: animat 2s infinite linear;
}
#keyframes animat {
0% {background-image: linear-gradient(to right, lightgreen, lightblue);}
50% {background-image: linear-gradient(to right, lightblue, lightgreen);}
100% {background-image: linear-gradient(to right, lightgreen, lightblue);}
}
Anyway, that gives this cool effect in IE, where it is soothing, but you can't tell the background is necessarily moving. I would appreciate it if someone could open this page in IE and let me know how to do it without background-position. Thanks, I really appreciate it.
I'm playing around with a CSS3 Gradient and trying to move it in on mouseover. As you can see from this jsFiddle, the CSS gradient appears on :hover; however, it seems to flickers a few times.
FYI, so far, this has been tested on Chrome v30 / Firefox v24 / Safari v5.1.
Separately, both have turned out to be working solutions, but combined, I get the flickering effect.
nav li {
width: 90px;
padding-right: 15px;
padding-left: 15px;
height: 30px;
border: 1px solid #000;
float: left;
list-style-type: none;
background-position: -200px -200px;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
}
nav li:hover {
background-position: 200px 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
}
I've tried limiting the animation using animation-iteration-count, but as I've figured out, this only seems to work with animations and #keyframes. I've also read on a few different sites that
#keyframes don't yet support CSS Gradient animation.
The flickering effect is due to the difference between your element height (30px) and the offsets you've given for the background (-200px -> 0px).
Basically, it's scrolling past the view six times in the one second transition (because 30 goes into 200 six times), which is what is giving you the flickering effect. You can see the effect more easily if you increase the transition time a bit, say to 5 seconds; this will make it more obvious what it happening. (obviously you can set it back when you're done testing)
If you change the inital background-position to -30px instead of -200px, you'll get it scrolling into view just one time, and thus no flicker.
Hope that helps.
The problem is background-repeat. You must set it to no-repeat so that the background is not visible before hover
background-repeat: no-repeat;
JSFiddle
As mentioned in other answers, the problem is background-repeat and your very large background position.
Here is an updated Fiddle with what I believe you were trying to achieve.
Note that I have removed all of the redundant CSS rules - all major browsers now support gradients and transitons without prefix, making all those prefixes useless (it should also be noted that -ms-transition and -ms-linear-gradient have never existed, because IE didn't jump the gun... did you know there are at least THREE different ways to define gradients in Chrome?)
In addition to cleaning up, I moved the background definition to the element's styles (rather than its hover styles) to ensure that a "transition out" is possible, otherwise it just snaps to blank. I have applied background-repeat:repeat-x to only allow horizontal repeating, and adjusted the background-position so that in the initial state the gradient is just barely completely off the bottom, and the hover state is such that it is in the right place. This produces a smooth and exact transition.
Hope this helps!
I have two images in an HTML page. One is black-and-white, the other is color. I would like to transition from the black-and-white image to the color image using a custom animation. The effect I'm looking for is where the image appears black-and-white, and then appears to be "painted" in color, stroke-by-stroke.
The easiest way I can think to do this is to create an animated gif that starts white and gets painted black, stroke-by-stroke. Then I could place the color image on top of the black-and-white image using absolute positioning and mask the color image with the animated gif.
However, before pursuing that I searched all over to see if anyone had ever done anything like that, and I've been unable to turn up any examples. Is that even possible, and can you show an example of it?
Or, is there a better way to achieve this effect?
If you have just two images then cross fading two overlayed images is pretty simple
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Look here at demo 3 & 4 http://css3.bradshawenterprises.com/cfimg/
I have done half of the work for you
for this html
<id class="base">
</id>
and this CSS
.base {
width: 200px;
height: 200px;
border: solid 1px black;
position: absolute;
}
.base:before, .base:after {
background-image: url("http://placekitten.com/200/300");
width: 100%;
height: 100%;
position: absolute;
content: '';
}
.base:after {
-webkit-filter: grayscale(1);
-webkit-mask-size: 200px 200px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px);
}
You get (in 2 pseudo elements) the original image and the image turned in grayscale. (You need a webkit browser for this).
Then , the grayscale image is turned transparent with an mask file.
I don't have any gif with transparencies, so I can not test the final result, but I think that it should work. (Just change .webkit-mask-image to url(gif)
Share your result if it works !
demo
And yes, it is a overkill, but once you get it working you can adapt with no work to another image !
updated demo with an animated gif as mask
I'm trying to create a transition on a gradient background of a <div>. I'm trying to do it this way because I'd like to implement two different styles on my site a light one and a darker one. After choosing the right color and implementing a way to change between the two themes I thought why not build a transition to smoothen the switch between themes.
I looked up a way to transition a gradient. I found this blog: Sapphion.com. It explains how to transition a gradient through the background-position.
After copying the code to a jsFiddle it sort of worked. It doesn't matter what I set on the background-position it always transitions to the full gradient from 0% to 100%. I want to transition it from 0% to 50% so that you only see 50% to 100% of the gradient. Does anyone know how to do this or did I miss something?
your mistake was to specify background-position: 100y; in the hover state.
It should have been (since you are moving the gradient in the vertical direction)
background-position-y: -100px;
full CSS:
#DemoGradient{
background: linear-gradient(to bottom, #ffffff 0%, #bfbfbf 50%, #45484d 50%, #000000 100%);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px; /* correct value if you want it to get at 50% */
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position-y: -100px;
}
updated demo