--- a/src/hdalab/static/hdalab/css/cattree.css	Thu Mar 05 13:51:05 2015 +0100
+++ b/src/hdalab/static/hdalab/css/cattree.css	Thu Mar 05 16:48:39 2015 +0100
@@ -108,61 +108,61 @@
     font-size: 1.3rem;
     text-transform: none;
 }
-.disciplist li a.arts-plastiques::before {
+.disciplist li a#arts-plastiques::before {
     background-position: left -50px;
 }
-.disciplist li a.arts-decoratifs::before {
+.disciplist li a#arts-decoratifs::before {
     background-position: left -100px;
 }
-.disciplist li a.arts-jardins::before {
+.disciplist li a#arts-jardins::before {
     background-position: left -150px;
 }
-.disciplist li a.arts-cirque::before {
+.disciplist li a#arts-cirque::before {
     background-position: left -200px;
 }
-.disciplist li a.arts-numeriques::before {
+.disciplist li a#arts-numeriques::before {
     background-position: left -250px;
 }
-.disciplist li a.bd::before {
+.disciplist li a#bd::before {
     background-position: left -300px;
 }
-.disciplist li a.chanson::before {
+.disciplist li a#chanson::before {
     background-position: left -350px;
 }
-.disciplist li a.cinema::before {
+.disciplist li a#cinema::before {
     background-position: left -400px;
 }
-.disciplist li a.danse::before {
+.disciplist li a#danse::before {
     background-position: left -450px;
 }
-.disciplist li a.design::before {
+.disciplist li a#design::before {
     background-position: left -500px;
 }
-.disciplist li a.dessin::before {
+.disciplist li a#dessin::before {
     background-position: left -550px;
 }
-.disciplist li a.litterature::before {
+.disciplist li a#litterature::before {
     background-position: left -600px;
 }
-.disciplist li a.musique::before {
+.disciplist li a#musique::before {
     background-position: left -650px;
 }
-.disciplist li a.mode::before {
+.disciplist li a#mode::before {
     background-position: left -700px;
 }
-.disciplist li a.peinture::before {
+.disciplist li a#peinture::before {
     background-position: left -750px;
 }
-.disciplist li a.photographie::before {
+.disciplist li a#photographie::before {
     background-position: left -800px;
 }
-.disciplist li a.poesie::before {
+.disciplist li a#poesie::before {
     background-position: left -850px;
 }
-.disciplist li a.sculpture::before {
+.disciplist li a#sculpture::before {
     background-position: left -900px;
 }
-.disciplist li a.theatre::before {
+.disciplist li a#theatre::before {
     background-position: left -950px;
 }
 .disciplist li a::before {

--- a/src/hdalab/static/hdalab/js/trees.js	Thu Mar 05 13:51:05 2015 +0100
+++ b/src/hdalab/static/hdalab/js/trees.js	Thu Mar 05 16:48:39 2015 +0100
@@ -1,3 +1,16 @@
+// from http://stackoverflow.com/a/7031800
+
+$.fn.reveal = function() {
+    var args = Array.prototype.slice.call(arguments);
+    return this.each(function(){
+        var img = $(this),
+            src = img.data("src");
+        src && img.attr("src", src).load(function(){
+            img[args[0]||"show"].apply(img, args.splice(1));
+        });
+    });
+};
+
 
 function countContentsAndThemes(_data) {
     _data.counts = {
@@ -33,7 +46,7 @@
     var _prefix = '<li class="themeli{{#isfolded}} folded{{/isfolded}}"><p class="theme"><span style="font-size: {{font_size}}px">{{label}}</span> &mdash; {{#counts.themes}}{{counts.themes}} thème(s){{#counts.contents}}, {{/counts.contents}}{{/counts.themes}}{{#counts.contents}}{{counts.contents}} notice(s){{/counts.contents}}</p><ul>',
         _suffix = '{{#contents}}<li class="content{{#hidden}} hidden{{/hidden}}" id="content_{{id}}"><p class="title score_{{score}}"><a href="'
             + _dsurl
-            + '{{hda_id}}">{{title}}</a></p><div class="foldedcontent"><div class="img-container"><img src="http://www.histoiredesarts.culture.fr/images/pf/{{hda_id}}.jpg" />'
+            + '{{hda_id}}">{{title}}</a></p><div class="foldedcontent"><div class="img-container"><img data-src="http://www.histoiredesarts.culture.fr/images/pf/{{hda_id}}.jpg" />'
             + '</div><p class="description">Source: <a href="{{organization_url}}" target="_blank">{{organization}}</a><br /><a href="'
             + _dsurl
             + '{{hda_id}}" class="content">{{trimmed_description}}</a></p></div></li>{{/contents}}{{#show_more}}<li class="show_more">Plus de contenus (<span class="show_more_count">{{show_more}}</span>)&hellip;</li>{{/show_more}}</ul></li>',
@@ -62,6 +75,7 @@
             height: 5 + $(this).find("p.description").outerHeight()
         },
         500);
+        $(this).find(".img-container img").reveal("fadeIn", 500);
     }).mouseleave(function() {
         $(this).find(".foldedcontent")
         .dequeue()

--- a/src/hdalab/templates/categories.html	Thu Mar 05 13:51:05 2015 +0100
+++ b/src/hdalab/templates/categories.html	Thu Mar 05 16:48:39 2015 +0100
@@ -41,24 +41,24 @@
             Seules les ressources les plus pertinentes sont affichées.
         </p>
         <ul class="disciplist">
-            <li><a class="cinema" href="#"><span>Cinéma</span></a></li>
-            <li><a class="architecture" href="#"><span>Architecture</span></a></li>
-            <li><a class="peinture" href="#"><span>Peinture</span></a></li>
-            <li><a class="litterature" href="#"><span>Littérature</span></a></li>
-            <li><a class="musique" href="#"><span>Musique</span></a></li>
-            <li><a class="theatre" href="#"><span>Théâtre</span></a></li>
-            <li><a class="photographie" href="#"><span>Photographie</span></a></li>
-            <li><a class="poesie" href="#"><span>Poésie</span></a></li>
-            <li><a class="sculpture" href="#"><span>Sculpture</span></a></li>
-            <li><a class="arts-jardins" href="#"><span>Jardin</span></a></li>
-            <li><a class="arts-cirque" href="#"><span>Cirque</span></a></li>
-            <li><a class="arts-numeriques" href="#"><span>Arts Numériques</span></a></li>
-            <li><a class="bd" href="#"><span>Bande Dessinée</span></a></li>
-            <li><a class="chanson" href="#"><span>Chanson</span></a></li>
-            <li><a class="danse" href="#"><span>Danse</span></a></li>
-            <li><a class="design" href="#"><span>Design</span></a></li>
-            <li><a class="dessin" href="#"><span>Dessin</span></a></li>
-            <li><a class="mode" href="#"><span>Mode</span></a></li>
+            <li><a id="cinema" href="#"><span>Cinéma</span></a></li>
+            <li><a id="architecture" href="#"><span>Architecture</span></a></li>
+            <li><a id="peinture" href="#"><span>Peinture</span></a></li>
+            <li><a id="litterature" href="#"><span>Littérature</span></a></li>
+            <li><a id="musique" href="#"><span>Musique</span></a></li>
+            <li><a id="theatre" href="#"><span>Théâtre</span></a></li>
+            <li><a id="photographie" href="#"><span>Photographie</span></a></li>
+            <li><a id="poesie" href="#"><span>Poésie</span></a></li>
+            <li><a id="sculpture" href="#"><span>Sculpture</span></a></li>
+            <li><a id="arts-jardins" href="#"><span>Jardin</span></a></li>
+            <li><a id="arts-cirque" href="#"><span>Cirque</span></a></li>
+            <li><a id="arts-numeriques" href="#"><span>Arts Numériques</span></a></li>
+            <li><a id="bd" href="#"><span>Bande Dessinée</span></a></li>
+            <li><a id="chanson" href="#"><span>Chanson</span></a></li>
+            <li><a id="danse" href="#"><span>Danse</span></a></li>
+            <li><a id="design" href="#"><span>Design</span></a></li>
+            <li><a id="dessin" href="#"><span>Dessin</span></a></li>
+            <li><a id="mode" href="#"><span>Mode</span></a></li>
         </ul>
         <div id="morecategories">{% trans 'Voir plus ou moins de categories' %}</div>