Résolu Faire apparaître du texte sur une image au survol de la souris

Bonjour, je voudrais commencer à faire mon blog, mais je ne suis pas très doué.

J'ai vu sur un blog, un effet qui est super sympa, mais je n'arrive pas à le reproduire.

Pourriez-vous m'aider, je sais que c'est en code css et html mais comment le refaire je ne sais vraiment pas. J'ai essayer de chercher sur le net avant de posté, mais je n'ai rien trouvé.

Voici l'exemple : http://drama-fansub.eklablog.com/vignettes-dramas-projets-termines-a126827276

Je voudrais faire celui-là, c'est-à-dire que le texte reste sur l'image au passage du survol avec cet effet.

J'espère que vous pourrez m'aider, je vous en remercie

Bonjour,

Quelques fils existent sur ce forum.

Le petit module "Recherche" en bas à gauche est parfois utile :

http://doc.eklablog.com/search?q=%20texte%20sur%20une%20image%20au%20survol%20de%20la%20souris

J'ai déjà consulté le module de recherche mais rien en concernant ce que je vous ai montré.

Bonsoir,

Essaye le code ci-dessous: (la première partie est du code css entre les balise <style> et </style> , la seconde est en html.

Pour faire un essai il est possible de tout coller dans le code source <> d'un article.

<style><!--
.conteneur_ext {float: left;}
.conteneur_int {width: 100%; heigth:100% ; float: left;}
 .texte_image {  /* texte sur l'image */ 
    background: #2d3570;
    color: #ffffff;
    font-size: 12pt;
    padding: 10px;
    opacity: 0;
    margin-top: 100px;
    height:60px; 
}
.texte_image:hover {    /* survol texte */
    opacity: 0.90;
--></style>



<div class="conteneur_ext" style="width: 300px; ; height: 200px;">
<div class="conteneur_int " style="background: url('http://ekladata.com/3PYR6GyJHhB_FTHah7fQ_TYrop0/fleursRougeJaune.jpg') left bottom;">
<div class="texte_image">Ici le texte du message</div>
</div>
</div>

J'ai obtenu ça en bricolant un code existant.
Le résultat n'est pas exactement comme dans l'exemple, mais cela s'en rapproche.

Il reste à adapter.

Merci pour ta réponse Stormalo, il fonctionne comme il faut 

Juste une petite question , je voudrais mettre un lien sur l'image et non sur le texte, mais je n'y arrive pas, peux-tu m'aider ? 

@ étoileblue  Dans ce cas le mieux est d'aller voir l'exemple et de s'en inspirer (firefox, clic droit, examiner l'élément)

le code html est du type:

<div class="box"><a href="url de la page à afficher"> <img  src="url de l'image" alt=" " /> </a>
<div class="caption">
<p class="simple-caption"><a href="url de l'article à afficher">texte affiché au survol</a></p>
</div>
</div>

le css est celui là :  clique ici      (trop long pour un commentaire forum)

code testé ok dans le blog de démo avec les vraies url

A adapter à ton cas.

Bonjour à tous,

Après avoir feuilleté tous les sujets, je me permets de laisser ma demande ici.

En effet, cette section s'y rapproche le plus.

J'ai découvert il y peu de temps ce blog où lorsque l'on clique sur l'image du film ou série en question, nous pouvons y lire son synopsis : http://wangbifansub.eklablog.com/dramas-termines-p810956

Voilà un aperçu de ce que je comptais faire :

Certes, j'ai essayé de contacter la propriétaire afin de lui demander comment elle s'y était prise, mais le blog semble malheureusement inactif.

Je me tourne donc vers vous, car il est évident qu'il y a un code html et CSS qui s'y cache.

Pourriez-vous me renseigner ?

Cordialement.

Bonjour, 

Je me permets de mettre un petit mot à la suite de celui de Michiyo parce que moi aussi je suis intéressée par cette fonction de pouvoir ajouter une "description" (titre , sous-titre et description) sur les images, je trouve ça aussi très fun et vraiment pratique pour la lecture. 

Est-il possible d'intégrer dans les options à cocher dans la gestion de nos thèmes de blog ou encore de nous donner une petite ligne de code (a priori un css je pense) à ajouter nous-même dans nos blogs pour ceci ?

Un grand merci par avance.