Background Image Fade Effect

Vous avez dû remarquer des effets de "fondu" sur les images d'arrière plan (background-image) de différentes pages de mon site. Cet effet est géré uniquement en CSS3 grâce à une animation keyframes :

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

mais aussi au code CSS issu de ce post:

https://css-tricks.com/snippets/css/transparent-background-images/

Il ne reste donc que la structure HTML très simpliste pour mettre en place notre effet de fondu:

<div class=”banner”>
  <h1>Lorem Ipsum</h1>
</div>

PS: A noter que sur la page que vous consultez actuellement, j'ai utilisé la même technique mais cette fois-ci en me servant de la balise image <img>.