Faire apparaître du texte au survol d'une image

[Oxtran]

Bonjour,

J'aimerai pouvoir faire apparaître du texte, une description au survol de chaque image présente sur le screen ci-joint qui se trouvent sur mon index :

Screen:

Auriez-vous une idée?

Voici ma template index_body correspondante :

template:

Merci d'avance!

[Toryudo]

Bonjour !
Alors, au niveau de l'apparition de texte, on peut faire très simple comme on peut faire compliqué.
Premier choix, ce serait juste d'ajouter des attributs title="mon texte" dans les <div> à l'intérieur de vos liens.

Par exemple :

Code:

<div class="box_list"></div>

Deviendrait :

Code:

<div class="box_list" title="Description de cette image, blablabla, j'écris plein de choses"></div>

Après cette modification, si vous pointez le div et que vous attendez une seconde environ sans bouger, le texte apparaitra. C'est un peu capricieux, parce que ça disparait dès que vous bougez (et ça ne réapparait pas tant que vous ne quittez pas le div pour y re-rentrer), mais peut-être que ça peut vous convenir !



Sinon, on pourra faire plus compliqué si vous décrivez la façon dont vous voulez que ça apparaisse très précisément.

[Oxtran]

Merci pour votre réponse!

Dans l'idée, j'aimerai voir l'image s'assombrir pendant que le texte apparait au centre de l'image au survol.

[Toryudo]

C'est donc la méthode plus technique !
Et voilà ce que ça donne, je vous laisse me dire s'il faut modifier encore quelques détails :

Code:

{JAVASCRIPT}
<style>
a {
    color: inherit;
    text-decoration: none;
}
.webcenter {
    position: relative;
    min-width: 950px;
    max-width: 950px;
    height: inherit;
    margin: auto;
    padding: 0 10px;
    display: flex;
}

.flex-columna {
    display: flex;
    flex-direction: column;
}
.banniere {
    background-image: url("https://zupimages.net/up/23/06/heeo.png");
    background-repeat: no-repeat;
    height: 396px;
    width: 539px;
    margin: auto;
    text-align: center;
}
.box {
    background-image: url("https://zupimages.net/up/23/02/rf03.png");
    background-repeat: no-repeat;
    height: 2540px;
}

.wrapper {  
    position: relative;
    min-width: 150px;
    max-width: 950px;
    height: inherit;
    margin: auto;
    padding: 0;
    display: flex;
}

.imgover {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    opacity: 0;
    transition: .5s ease;
    color: #fff;
    font-size: 30px;
    text-shadow: 2px 2px 2px #000;
}
.imgover:hover {
    opacity: 1;
    background: rgba(0,0,0,.5);
}
  
.box_list {
    position: absolute;
    height: 606px;
    width: 808px;
    top:50px;
    left:75px
}
.box_punaise {
    position: absolute;
    background-image: url("");
    background-repeat: no-repeat;
    height: 106px;
    width: 120px;
    top:60px;
    left:90px
}
.carte_box {
    position: absolute;
    height: 605px;
    width: 746px;
    top:620px;
    left:100px
}
.photo_one {
    position: absolute;
    height: 275px;
    width: 275px;
    top:656px;
    left:620px
}
.photo_two {
    position: absolute;
    height: 275px;
    width: 275px;
    top:936px;
    left:600px
}
.photo_three {
    position: absolute;
    height: 275px;
    width: 275px;
    top:980px;
    left:310px
}
.photo_four {
    position: absolute;
    height: 275px;
    width: 275px;
    top:1180px;
    left:75px
}
.livre_box {
    position: absolute;
    height: 535px;
    width: 404px;
    top:1480px;
    left:75px
}
.cassette_box {
    position: absolute;
    height: 300px;
    width: 480px;
    top:1200px;
    left:380px;
    z-index: 8;
}
.dossier_box {
    position: absolute;
    height: 442px;
    width: 458px;
    top:1520px;
    left:440px;
    z-index: 1;
}
.recrut_box {
    position: absolute;
    height: 474px;
    width: 357px;
    top: 2020px;
    left:110px;
    z-index: 1;
}
.journal_box {
    position: absolute;
    height: 500px;
    width: 400px;
    top:1970px;
    left:480px;
    z-index: 2;
}

</style>
<div class="banniere"></div>
<div class="webcenter flex-columna">
  <div class="box">
    <div class="box_punaise"></div>

    <a href="https://o-brien.forumactif.fr/t1-hierarchie">
      <img class="box_list" src="https://zupimages.net/up/23/05/u7r2.png" alt="" />
      <div class="imgover box_list">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/f67-territoires">
      <img class="carte_box" src="https://zupimages.net/up/23/05/xvnt.png" alt="" />
      <div class="imgover carte_box">Voici du texte</div>
    </a>          
    <a href="https://o-brien.forumactif.fr/f68-discussions">
      <img class="photo_one" src="https://zupimages.net/up/23/05/3seh.png" alt="" />
      <div class="imgover photo_one">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/f5-salle-d-arcade">
      <img class="photo_two" src="https://zupimages.net/up/23/05/ba2n.png" alt="" />
      <div class="imgover photo_two">Voici du texte</div>
    </a>
    <a href="">
      <img class="photo_three" src="https://zupimages.net/up/23/05/ps0t.png" alt="" />
      <div class="imgover photo_three">Voici du texte</div>
    </a>
    <a href="">
      <img class="photo_four" src="https://zupimages.net/up/23/05/28k7.png" alt="" />
      <div class="imgover photo_four">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/t101-codex-de-la-famille">
      <img class="livre_box" src="https://zupimages.net/up/23/05/rzip.png" alt="" />
      <div class="imgover livre_box">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/f2-annonces">
      <img class="cassette_box" src="https://zupimages.net/up/23/05/dp2l.png" alt="" />
      <div class="imgover cassette_box">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/f16-acces-prives">
      <img class="dossier_box" src="https://zupimages.net/up/23/05/g741.png" alt="" />
      <div class="imgover dossier_box">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/t100-sujet-candidature">
      <img class="recrut_box" src="https://i.imgur.com/TbJf70s.png" alt="" />
      <div class="imgover recrut_box">Voici du texte</div>
    </a>
    <a href="https://o-brien.forumactif.fr/f8-activites-criminelles">
      <img class="journal_box" src="https://zupimages.net/up/23/05/8a8k.png" alt="" />
      <div class="imgover journal_box">Voici du texte</div>
    </a>
    </div>
</div>
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->
<!-- BEGIN disable_viewonline -->
<div id="qeel">
<h2>
Qui est en ligne ?
</h2>

<div class="qeel-left">


<div class="qeel-stats">
<div><i class="fas fa-users"></i>{TOTAL_USERS}</div>
<div><i class="fas fa-pencil-alt"></i>{TOTAL_POSTS}</div>
</div>

<div class="qeel-last-24">
<div class="qeel-online-content">
  <table>{L_CONNECTED_MEMBERS}</table>
</div>
<h3>Dernières 24h</h3>
</div>
</div>

<div class="qeel-online">
<div class="qeel-online-stats">
{TOTAL_USERS_ONLINE}
</div>
<div class="qeel-online-content qeel-membre-connectes">
{LOGGED_IN_USER_LIST}
</div>
<h3>Actuellement en ligne</h3>
</div>

<div class="qeel-right">
<div>
<div class="qeel-welcome">
<h3>Bienvenue à</h3>
{NEWEST_USER}
</div>
<div class="qeel-discord">
<a href="https://discord.gg/Xpv7XV6KUX" target="_blank"><i class="fab fa-discord"></i><div>
Rejoindre notre <b>Discord</b>
</div></a>
</div>

</div>

<div class="qeel-links">
<a href="{U_TODAY_ACTIVE}"><i class="far fa-file"></i><div>
Sujets actifs du jour
</div></a>
<a href="/search?search_id=newposts"><i class="far fa-file"></i><div>
Derniers sujets & messages non lus
</div></a>
<a href="{U_TODAY_POSTERS}"><i class="far fa-star"></i><div>
Top 20 des posteurs du jour
</div></a>
<a href="{U_OVERALL_POSTERS}"><i class="fas fa-star"></i><div>
Top 20 des posteurs du forum
</div></a>
</div>

</div>

</div>
<script>
  $('.qeel-stats').html($('.qeel-stats').html().replace(/Nous avons|membre enregistré|membres enregistrés|Nos membres ont posté un total de |messages|message/ig, ''));
  $('.qeel-last-24').html($('.qeel-last-24').html().replace("Membres connectés au cours des 24 dernières heures : ", ''));
  $('.qeel-online-stats').html($('.qeel-online-stats').html().replace("Il y a en tout ", ''));
  $('.qeel-membre-connectes').html($('.qeel-membre-connectes').html().replace("Utilisateurs enregistrés : ", ''));
  $('.qeel-welcome').html($('.qeel-welcome').html().replace("L'utilisateur enregistré le plus récent est ", ''));
  </script>
<!-- END disable_viewonline -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
<br clear="all" />
<center>
<table class="tableaupartenaire" width="900" border="0" cellspacing="1"cellpadding="0">
<tr><td class="catHead" colspan="1" height="28"><span class="Partenaires"></span><b><font color="white"><center>Partenaires</center></font></b></td></tr>
<tr><td class="row1"><marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();">Aucun partenaire pour le moment</marquee></td></tr>
</table>
</center>
<p class="mes-credits"> O'Brien | 2021 - 2023</p>
{CHATBOX_BOTTOM}
{AUTO_DST}

[Oxtran]

Après réflexion, je pense me contenter d'une description discrète et simple comme le premier exemple.

J'en profite pour vous partager un autre problème auquel je fais face sur mon forum qui est encore sans réponses.

https://forum.forumactif.com/t408328-appliquer-un-changement-d-apparence-sur-les-liens-actifs-de-la-barre-de-navigation

Peut-être pourrez-vous m'aider, en tout cas je vous remercie pour votre aide précieuse!

Je passe en résolu.