• Résolu Code "afficher un texte au survole d'une image"


    Mardi 7 Novembre à 15:47
    Rioko Sakura

    Bonjour,

    je suis à la recherche d'un code pour que, lorsque la souris arrive sur une image, un texte avec un lien s'affiche sur l'image et que l'opacité de l'image diminue, comme c'est le cas dans cet article : www.

    Cependant, j'ai beau créé une class et tout ce qui faut ça ne marche pas et quand ça marche le texte n'est pas au centre de l'image.

    Est-ce que quelqu'un pourrait m'aider ?

    Merci.

    Mardi 7 Novembre à 16:53
    Colette95

    Bonjour,

    En cherchant un peu sur le forum, juste quelques lignes plus bas sous ton message tu aurais trouvé ce lien :

    http://doc.eklablog.com/faire-apparaitre-du-texte-sur-une-image-au-survol-de-la-souris-topic164428

    Je pense que cela répondra à tes attentes.

    Mardi 7 Novembre à 18:23
    Rioko Sakura

    Ah désolé je n'avais pas lu tout le sujet. En tout cas merci ça m'a beaucoup aidé mais je n'ai pas réussi une chose : aligner le texte verticalement au milieu même avec ce code :

    <code class=" language-css">vertical-align:middle;</code>

    EDIT : J'ai mis un block de couleur transparent et je voulais positionner le texte en fonction de l'image et non en fonction du block mais ça ne marche pas même en utilisant les padding ou les margin ça ne marche pas.

    Est-ce que tu sais comment faire ?

    Mercredi 8 Novembre à 08:03
    Colette95

    Tu pourrais donner tes codes ou le lien menant à tes essais, car d'après ce que tu indiques, c'est un sacré "cocktail" html/css que tu as fait pour l'alignement du texte. sarcastic

    Mercredi 8 Novembre à 09:07
    Rioko Sakura

    Voici mon css :

    /*code image survole*/ 
    /*block "image"*/
    .box {         
        cursor: pointer;     
        height: 200px;     
        float: left;     
        margin: 12px;     
        position: relative;     
        overflow: hidden;    
        width: 150px;;  
        display: inline-block;
        }

    /*block "image"*/
    .box img {     
        width: 100%;  
        height: 100%;  
        left: 0px;   
        transition: all 300ms ease-out 0s;
        border-radius: 5px;
    line-height:-20px;}  


    /*sous titre*/
    .caption {     
        background-color: rgba(0, 0, 0, 0.8);    
        position: absolute;  
        color: #FFF;   
        z-index: 100;
        width: 100%;   
        transition: all 300ms ease-out 0s;   
        left: 0px;     top: 100%;
        opacity : 1;
        font-family: Open Sans;
        text-align: center;
        line-height:-20px;
        vertical-align:middle;
        text-shadow: 0px 0px 6px #fff;
        
    }

    /*bas du block*/
    .box .caption {       
        background-color: rgba(0,0,0,0.8);    
        position: absolute;
        vertical-align:middle;
        color: #fff;    
        z-index: 100;
        width:100%;  
        -webkit-transition: all 300ms ease-out;    
        -moz-transition: all 300ms ease-out;   
        -o-transition: all 300ms ease-out;   
        -ms-transition: all 300ms ease-out;   
        transition: all 300ms ease-out;    
        left: 0;     top: 100%;
        }

    /*block*/
    .simple-caption {    
        height: 4em;  
        width: 100%;    
        display: block;  
        bottom: -30px;
        
        line-height: 25pt;   
        text-align: center;    
        background-color: #fff;
        opacity: 0;vertical-align:middle;  }

    .simple-caption a {color : #383838;}


    /*block au survol*/
    .box .simple-caption {   
        height: 60px;;     
        width: 150px;    
        display: block;
        vertical-align:middle;      
        text-align: center;  
        background: url("http://ekladata.com/DahAtz76dddaZZk2uq34yCY6Vjk.png");
        line-height: 140%; }
    .box .simple-caption a {color : #383838;
    vertical-align:middle;
    ;}


    /*au survol bloc apparaît*/
    .box:hover .simple-caption {    
        -moz-transform: translateY(-100%);  
        -o-transform: translateY(-100%);   
        -webkit-transform: translateY(-100%);   
        transform: translateY(-100%);  
        opacity : 1;    
        transition: opacity 0.5s linear 0s;
        border-radius: 5px;
    vertical-align:middle;}



    Et mon code HTML :


    <div class="box"><a> <img src="http://ekladata.com/lMtdXFGbG40_CgZRWVqfjRpNOS4.png" alt=" " /> </a>
    <div class="caption">
    <p class="simple-caption"><a href="http://lesanimesetco.eklablog.fr/kimi-no-na-wa-a130947698">Kimi No Na Wa</a></p>
    </div>
    </div>
    <div class="box"><a> <img src="http://ekladata.com/dyglnNno2FEBk5sXl6x4Y7ihn3c.png" alt=" " /> </a>
    <div class="caption">
    <p class="simple-caption"><a href="http://lesanimesetco.eklablog.fr/koe-no-katachi-a130706402">Koe No Katashi</a></p>
    </div>
    </div>
    <div class="box"><a> <img src="http://ekladata.com/JsMI2aFWrAJmsS8HYTgr2hB8z6k.png" alt=" " /> </a>
    <div class="caption">
    <p class="simple-caption"><a href="http://lesanimesetco.eklablog.fr/le-garcon-et-la-bete-a130661608">Le Gar&ccedil;on et La B&ecirc;te</a></p>
    </div>
    </div>
    <div class="box"><a> <img src="http://ekladata.com/HBs3Yx0EnFt3zOqS9iXtev6c6kI.png" alt=" " /> </a>
    <div class="caption">
    <p class="simple-caption"><a href="http://lesanimesetco.eklablog.fr/professeur-layton-a108892566">Professeur Layton et La Diva Eternelle</a></p>
    </div>
    </div>
    <div class="box"><a> <img src="http://ekladata.com/lwTgUaSbdBq1ZssvLx_2QvB29L0.png" alt=" " /> </a>
    <div class="caption">
    <p class="simple-caption"><a href="http://lesanimesetco.eklablog.fr/orange-mirai-a130709860">Orange -Mirai-</a></p>
    </div>
    </div>
    <div class="box"><a> <img src="http://ekladata.com/GK0C7KjBQeOKRGPMjWMsiIRRw3s.png" alt=" " /> </a>
    <div class="caption">
    <p class="simple-caption"><a href="http://lesanimesetco.eklablog.fr/zutto-mae-kara-suki-deshita-a130840332">Zutto Mae Kara Suki Deshita</a></p>
    </div>
    </div>

     

     

     

    Mercredi 8 Novembre à 17:23
    Colette95

    J'avoue qu'à travers tes codes je n'ai pas réussi à m'y retrouver. Je ne sais pas où tu les as copiés/collés et les modifications que tu as pu y apporter, toujours est-il qu'il y a plein de lignes inutiles, des codes à répétition et ce, sans compter les erreurs...

    Bref, j'ai donc préféré repartir de zéro avec les codes de stormalo qui étaient dans le post que je t'avais joint en lien et essayé d'avoir un rendu équivalent à celui que tu souhaitais sur le lien www.

    Voici ce que j'ai mis dans le html.

    <div class="conteneur_ext" style="width: 150px; height: 200px;">
    <div class="conteneur_int" style="background: url('http://ekladata.cm/lMtdXFGbG40_CgZRWVqfjRpNOS4.png');">
    <div class="texte_image"><a href="http://lesanimesetco.eklablog.fr/kimi-no-na-wa-a130947698">Kimi No Na Wa</a></div>
    </div>
    </div>
    <div class="conteneur_ext" style="width: 150px; height: 200px;">
    <div class="conteneur_int" style="background: url('http://ekladata.com/dyglnNno2FEBk5sXl6x4Y7ihn3c.png');">
    <div class="texte_image"><a href="http://lesanimesetco.eklablog.fr/koe-no-katachi-a130706402">Koe No Katashi</a></div>
    </div>
    </div>
    <div class="conteneur_ext" style="width: 150px; height: 200px;">
    <div class="conteneur_int" style="background: url('http://ekladata.com/JsMI2aFWrAJmsS8HYTgr2hB8z6k.png');">
    <div class="texte_image"><a href="http://lesanimesetco.eklablog.fr/le-garcon-et-la-bete-a130661608">Le Gar&ccedil;on et La B&ecirc;te</a></div>
    </div>
    </div>
    <div class="conteneur_ext" style="width: 150px; height: 200px;">
    <div class="conteneur_int" style="background: url('http://ekladata.com/HBs3Yx0EnFt3zOqS9iXtev6c6kI.png');">
    <div class="texte_image"><a href="http://lesanimesetco.eklablog.fr/professeur-layton-a108892566">Professeur Layton et La Diva Eternelle</a></div>
    </div>
    </div>
    <div class="conteneur_ext" style="width: 150px; height: 200px;">
    <div class="conteneur_int" style="background: url('http://ekladata.com/lwTgUaSbdBq1ZssvLx_2QvB29L0.png');">
    <div class="texte_image"><a href="http://lesanimesetco.eklablog.fr/orange-mirai-a130709860">Orange -Mirai-</a></div>
    </div>
    </div>
    <div class="conteneur_ext" style="width: 150px; height: 200px;">
    <div class="conteneur_int" style="background: url('http://ekladata.com/GK0C7KjBQeOKRGPMjWMsiIRRw3s.png');">
    <div class="texte_image"><a href="http://lesanimesetco.eklablog.fr/zutto-mae-kara-suki-deshita-a130840332">Zutto Mae Kara Suki Deshita</a></div>
    </div>
    </div>

    et dans le css.

    .conteneur_ext { 
    float: left; 
    display: inline-block;
    margin: 30px; 
    }
    .conteneur_int {
    width: 150px;
    height: 200px;
    float: left;
    border-radius: 5px;
    overflow: hidden;
    }
    .texte_image { /*fond texte sur image*/
    width: 150px;
    height: 200px;
    background: #FFF;
    text-align: center;
    padding: 90px 0 0 0;
    opacity: 0;
    transition: all 1s;
    }
    .texte_image a { /*texte sur image*/
    color: #000000;
    font-size: 9pt;
    font-family: "Open Sans";
    text-shadow: 0px 0px 6px #000000;
    }
    .texte_image:hover { /*survol texte */
    opacity: 0.8;
    }

    Tu vois que le css est réduit considérablement. Tu peux faire un copier/coller et l'adapter évidemment.

    Suis saturée par le survol de souris he

    PS Pas facile de poster en plus sur le forum car il y a un bug et ma page remonte systématiquement, donc j'écris sans voir. intello 

    Jeudi 9 Novembre à 19:08
    Rioko Sakura

    Oh merci beaucoup !! C'est exactement ce que je voulais :)

    Pourtant le code je l'ai pris dans le sujet sur lequel tu m'as conseillé d'aller... Après j'ai juste bidouillé pour faire à peu près ce que je voulais mais le code que tu viens de me donner et juste et simplement celui que je voulais.

    Jeudi 9 Novembre à 20:27
    Colette95

    Effectivement, autant pour moi, je n'avais pas vu dans ce fil qu'il y avait d'autres codes, récupérés par stormalo sur un blog, pour aider un autre blogueur.

    De mon côté, j'ai pris pour base les codes qu'il avait créés (merci stormalo smile) et que je trouvais très bien car pas besoin d'en mettre toute une tartine. 

    Je suis ravie que leur adaptation te convienne et tu t'y retrouveras certainement plus facilement en cas de modification. 

    Bonne continuation et bonne soirée. smile




    Vous devez être membre pour poster un message.