CSS fade-in on page load, fade-out on hover

Question

Anybody know how to make a thumbnail fade in on page load and fade out to half opacity upon hover?

I'm new to CSS transitions and animation. Many thanks in advance for your help!

Here is my CSS for the fade-ins of the thumbnails:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    animation-duration:0.5s;
}
.fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.fade-in.two {
-webkit-animation-delay: 0.4s;
-moz-animation-delay:0.4s;
animation-delay: 0.4s;
}
.fade-in.three {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fade-in.four {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fade-in.five {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
} 
.fade-in.six {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

Answer 1

Try this example I put together. It uses animation to fade in the item, and then uses css transitions to change the opacity on hover.

This should really be done with javascript, but here's a pure css solution. If you want to add more items, then just duplicate one of the 'fade_item_[x]' classes and change the times.

PURE CSS VERSION

CSS:

.blocky_text{
    background-color:#229922;
    display:inline-block;
    /*for hover transition */
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.blocky_text:hover{
    opacity:0.5;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

.fade_item_1{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -moz-animation: fadein 0.5s; /* Firefox */
    -ms-animation: fadein 0.5s; /* Internet Explorer */
    -o-animation: fadein 0.5s; /* Opera */
    animation: fadein 0.5s;
}

.fade_item_2{
    -webkit-animation: fadein 0.8s; /* Safari and Chrome */
    -moz-animation: fadein 0.8s; /* Firefox */
    -ms-animation: fadein 0.8s; /* Internet Explorer */
    -o-animation: fadein 0.8s; /* Opera */
    animation: fadein 0.8s;
}

.fade_item_3{
    -webkit-animation: fadein 1.1s; /* Safari and Chrome */
    -moz-animation: fadein 1.1s; /* Firefox */
    -ms-animation: fadein 1.1s; /* Internet Explorer */
    -o-animation: fadein 1.1s; /* Opera */
    animation: fadein 1.1s;
}

.fade_item_4{
    -webkit-animation: fadein 1.4s; /* Safari and Chrome */
    -moz-animation: fadein 1.4s; /* Firefox */
    -ms-animation: fadein 1.4s; /* Internet Explorer */
    -o-animation: fadein 1.4s; /* Opera */
    animation: fadein 1.4s;
}

HTML:

<p class="fade_item_1 blocky_text"> An example. </p>
<p class="fade_item_2 blocky_text"> An example. </p>
<p class="fade_item_3 blocky_text"> An example. </p>
<p class="fade_item_4 blocky_text"> An example. </p>

And here's a JSFiddle of it working: http://jsfiddle.net/DFcb9/1/

JQUERY VERSION

CSS:

.blocky_text{
    background-color:#229922;
    display:inline-block;
    opacity:0;    
}

.hoverable{
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.hoverable:hover{
    opacity:0.5 !important;
}

JQUERY:

$(document).ready(function(){
    fadeInGroup('.blocky_text'); 
});

function fadeInGroup(group){
$(this).css("opacity","0");
$(group).each(function(index, element) {    
    var d = (130 * (index)).toString()
    $(this).delay(d).fadeTo(1200,1,function(){
        $(this).addClass("hoverable");
    });
});

}

HTML:

<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>
<p class="blocky_text"> An example. </p>

With this version, you can keep adding as many of the texts as you want and they will fade in correctly. Jquery loops through the items with the class "blocky_text" and adds a different start delay for each one.

You can then add a completely new group of items of a given class and introduce them just by duplicating the adding opacity:0 in the css and fadeInGroup('.classname'); to the jquery document load.

Here's a jsfiddle of this working: http://jsfiddle.net/utKa5/1/