• Pour faire apparaître du texte au survol d'une image. C'est pas super compliqué une fois qu'on a compris, même si ça peut paraître rebutant la première fois qu'on voit les codes. Il y a une partie CSS et une partie HTLM.

     

     

    PARTIE CSS:

    .NOM DE TON CODE {
        background-color: #ffffff; /*Couleur de fond*/
        height: XXpx; /*hauteur de ton image*/
        opacity: 0; /*pour qu'on ne le voit pas, tant que ce n'est pas survollé*/
        position: absolute;
        width: XXpx; /*largeur de ton image*/
        transition: all 0.6s ease; /*temps d'apparition au survol*/
    }

    #image:hover .NOM DE TON CODE {
        height: XXpx; /*hauteur de ton image*/
        opacity: 0.9; /*opicité du fond lorsqu'il apparaît, si y a 0.9 c'est qu'il est un peu transparent*/
        width: XXpx; /*largeur de ton image*/
    }

     

    Alors, le NOM DE TON CODE, faut le remplacer par une truc du style "suvolimage" ou "survol1" (sans espace) pour créer une balise il me semble. Ensuite, une fois cette balise créée, on la rappelle pour l'utiliser sur une image survolée.

     

     

    PARTIE HTML

    <div id="image">
    <div class="NOM DE TON CODE">
    <p><span>TON TEXTE<br /><br /></div>
    </div>
    <p style="text-align: center;"><img src="URL DE TON IMAGE" alt=" " /></p>

     

    Du coup, y a rien de  bien compliqué ici. Comme dit plus haut, le NOM DE TON CODE constitue une balise. Et si tu veux utiliser cette balise, il faut que tu la rappelle en la nommant dans ton code HTLM. Attention, cette balise ne peut être utiliser que pour des images ayant les mêmes dimensions. Si tu veux refaire le même effet mais avec une image ayant d'autres dimensions il faut que tu refasses ce code, mais cette fois-ci en nommant ton code différemment.

     

    (+) au cas où, pour ceux qui se demande comment se nomme le code, en fait, il faut remplacer le NOM DE TON CODE par ce que vous voulez afin que vous puissiez reconnaître le code dans votre CSS.

     

    (Ah et si jamais le texte est plus long que la hauteur de l'image bah tu mets simplement une scrollbar.)

     

    Le code n'est pas de moi, il est de tumblr (fin, il est dispo sur un plein de blog codage sur tumblr quoi). Je me suis juste contentée d'expliquer.


    31 comments
  • Chappie

     

    Chappie | Science - Fiction | Un film de Neil Blomkamp | voir l'affiche

     

     

    Résumé: Deon, un jeune prodige qui a inventé les Scouts: une unité de robots policiers, a un quelque chose à accomplir dans sa vie. Quelque chose d'incroyable, d'important. Il veut créer une intelligence artificielle et il réussit. Impatient de la tester, il récupère un robot destiné à dépérir. Mais pendant ce temps, des criminels décident de se rebeller contre les Scouts et planifie l'enlèvement de Deon. Menacé, il est contraint de faire un marché: il laisse le robot à Ninja, Yo-Landi et America en échange, il reviendra pour lui apprendre des choses. Le robot alors nommé Chappie, est la première intelligence artificiel du monde, cependant son existence va déranger bien des personnes...

     

    Mon avis: ★ ★ ★ ★ ☆

    Ce film est génial, franchement. J'adore la sf et ce qui touche au idées futuristes. Les acteurs jouent bien et Chappie est juste adorable. C'est un gros robot mastoque, mais il est fidèle à lui même et franchement, c'est juste trop mignon. Puis on passe de la naïveté à la réalité et c'est violent, c'est dur et c'est triste. (À la fin j'ai pleuré et tout.) J'adore les films un peu dur et qui font des frissons émotionnellement. Puis la musique, elle m'a mis la boule au ventre tout le temps, enfin je sais pas pour vous (écoutez la playlist - bon y a pas tout parce que mes morceaux étaient trop lourds) mais elle m'a foutue mal à l'aise (mais je l'adore quand même). Sinon, le seul point négatif que j'ai à donné, c'est que parfois c'était un peu long, j'attendais que ça se passe, mais ça arrivait pas. Sinon bah voilà. Un bon film à regarder!


    50 comments



    Follow articles RSS
    Follow comments' RSS flux