• Genre menu

    Vous avez peut-être trouvé, sur certains sites, des présentations où le survol d'un cadre, fait apparaître le titre d'une rubrique, en lien.

    C'est une sorte de menu et j'ai voulu reprendre le principe, à ma façon car je ne connais pas leur façon de faire.

    Survolez chaque image; elle laissera apparaître un lien vers une de mes pages, pour exemple.




    Un autre lien sur l'image.

     

     

    Le code d'une animation au survol d'un élément fonctionne lorsque votre curseur est sur cet élément; dans le cas d'une animation par translation, cet élément se déplace et sort de dessous votre curseur et l'animation s'arrête.
    Dans ce montage, le survol du premier cadre le fait remonter et le survol du second cadre poursuit l'animation lorsque le curseur sort du premier cadre pour se retrouver sur le second; ainsi, l'animation ne s'arrête pas.

    <div style="position: absolute; transform: translate(50px,50px); width: 300px; height: 300px; border: 3px solid black; overflow: hidden; margin: 0 0 50px 0;">
    <p id="niv1"><br /><a href="http://pourquoipas732.eklablog.com/diapo-18-p1087466" target=" blank">Un clic </a></p>
    <p id="niv2">&nbsp;</p>
    </div>
    <style><!--
    #niv1{position:absolute; transform:translate(0px,0px);width:300px; height:300px; background-color:yellow; text-align:center; font-size:20pt;}
    #niv2{position:absolute; transform:translate(0px,0px); transition:all 1s linear; width:300px; height:300px; background:url('http://ekladata.com/prSCuP8xYjFLUeSAS4C666LeSuQ/f1.jpg');}
    #niv2:hover{transform:translate(0px,-300px);}
    #niv1:hover ~ #niv2{transform:translate(0px,-300px);}
    --></style>

    De façon classique, le survol de #niv2 le fait remonter mais en ajoutant la ligne du survol sur #niv1, l'animation continue lorsque votre curseur sort de dessus niv2 et passe sur niv1
    La taille des images est indicative et on peut les réduire pour faire des sortes de boutons de menu.