css transition opacity fade background
Wrap your image with a span
element with a black background.
.img-wrapper {
display: inline-block;
background: #000;
}
.item-fade {
vertical-align: top;
transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover {
opacity: 0.2;
}
<span class="img-wrapper">
<img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>
CSS transition to fade in image isn't working
In order for the transition
to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image
initially has opacity: 0; width: 50px;
.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
css transition opacity of the background color
In fact, opacity
and rgba()
are completely different.
Since you are using the rgba()
as the background color by the background
property, you'll need to use background
as transition property as follows:
.bx {
background: rgba(255,0,0,0.5);
width:100px; height:100px;
position: relative;
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out;
}
.bx:hover {
background: rgba(255,0,0,1);
}
JSBin Demo.
Using CSS for a fade-in effect on page load
Method 1:
If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Demo
- http://jsfiddle.net/SO_AMK/VV2ek/
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
Plain JavaScript (not in the demo)
document.getElementById("test").children[0].className += " load";
Demo
- http://jsfiddle.net/SO_AMK/a9dnW/
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
- http://jsfiddle.net/SO_AMK/a9dnW/3/
Browser Support
jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/
jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.
CSS how to make an element fade in and then fade out?
Use css @keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
here is a DEMO
.elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards;}
@-webkit-keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; }}
@keyframes fadeinout { 0%,100% { opacity: 0; } 50% { opacity: 1; }}
<div class=elementToFadeInAndOut></div>
CSS transition fade in only the background not the child divs
Move the background to a new div inside of the .content_top
element. This will create a new layer which we can animate without affecting the content.
Give .content_top
and .main_header
a position: relative
value. This will make the .content_top
a relative container, and give .main_header
the possibility to use the z-index
.
In the snippet below I've added a new element: .main_bg
. This element will get the background image and the animation.
Give the .main_bg
element a position: absolute;
. This will allow you to overlay elements on top of each other, in this case .main_bg
and .main_header
.
setTimeout(function() {
// Set BG image
var bg_content = document.querySelector('.main_bg');
bg_content.style.background = "linear-gradient(0deg,#000 0,rgba(0,0,0,.7) 35%,rgba(0,0,0,.4) 50%,rgba(0,0,0,0) 100%),url(https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg) no-repeat";
bg_content.style.backgroundSize = "cover";
bg_content.style.backgroundPosition = "center";
bg_content.classList.add("fade-in");
}, 1500);
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.main_bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_header {
position: relative;
color: blue;
text-align: center;
font-size: 30px;
z-index: 1;
}
.content_top {
height: 300px;
position: relative;
}
<div class="content_top">
<div class="main_bg"></div>
<div class="main_header"><span class="vertical_line"></span>
<p data-transkey="main_header_notrans"><span class="tino">Some header</span> <br> some text</p>
</div>
</div>
Related Topics
Css: How to Change Colour of Active Navigation Page Menu
Is a <Button> Allowed to Have Display:Grid
How to Style Disabled Textarea in IE8
CSS Different Font Sizes on Different Families
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
Firefox @Font-Face with Local File - Downloadable Font: Download Failed
Importance of CSS Stylesheet Hierarchy
Difference Between "-Webkit-Text-Fill-Color" and "Color"
How to Make Card-Columns Order Horizontally
CSS Select Multiple Descendants of Another Element
Why Is Filter(Drop-Shadow) Causing My Svg to Disappear in Safari
What Is the Current State of the "Scoped" Attribute for the Style Element in HTML5
How to Automatically Compile Less into CSS on the Server
How to Align Spans or Divs Horizontally
Why Use an HTML5 Semantic Tag Instead of Div
How to Remove the Hash from Compass's Generated Sprite Image Filenames