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

Ça rend trop bien Michiyo, j'adore ce format

par contre moi quand je le met dans la feuille de style il se passe rien il faut coller le css +html dans la feuille de style ? et si oui ça bloque, ça me dit qu'il y a une erreur dans le codage

@Michiyo,

C'est bien que tu aies mis le css dans la feuille de style, cela t'évitera beaucoup de soucis.

Reste à modifier ceci :

.bloc_description_cachee:hover img {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-filter: greyscale(100%);
-moz-filter: greyscale(100%);
-o-filter: greyscale(100%);
-ms-filter: greyscale(100%);
filter: greyscale(100%);
opacity: 0; /*Ajouter le ; car cela provoque un bug. Il te faudra certainement mettre une valeur autre que 0*/
transition: all ease 1s;
}

Tu peux aussi supprimer tout ce qui est en rose, ces codes étant obsolètes.

et pour ce qui est de la démarcation qui te gêne :

.bloc_interieur_mini_bloc{
width: 154px !important;
height: 140px !important;
border-radius: 0px !important;
overflow: hidden;
text-align: justify;
background-image:url(https://img4.hostingpics.net/pics/710250Sanstitre2.png); /*supprimer ce code car il s'agit d'une image*/
font-size: 9px;
margin-left: 5px !important;
margin-top: 8px !important;
font-family: 'Verdana';
font-size: 9px;
padding-top: 20px;
color: black;
}

@Yumiko,

Ton css est au bon endroit et ça fonctionne sur ton blog, alors ?... 

Coucou Colette merci pour ton aide encore :) 

alors je viens de réaliser un truc... j'ai mis mon css mais évidemment il faut que je mette le bout html dans chaque message pour que ça marche.. je test encore, tant que j'aurai pas réussi je vais tester lol et ça va finir par marcher mdr, au passage j'ai trouvé quelques blog sympa rempli de code css sympa.. j'en utilise donc quelques uns :) 

Eh oui, le css est en relation directe avec le html. 

Attention au copier/coller de codes pris sur d'autres blogs car évidemment tu récupères aussi les erreurs. Je vois beaucoup de blogs qui ont exactement les mêmes soucis dans leur design, faut pas chercher... 

N'oublie pas que Google est ton ami et qu'il vaut mieux aller sur des sites "Pro" pour apprendre sûrement et tranquillement. 

@Colette, je te remercie énormément pour ton aide. Tout marche comme sur des roulettes ! :)

Encore merci !

Non je crois que c'est plutôt ça :) que cherche Kiharu

------ Coller de là : juste avant le div)-------- 

<div class="conteneur_ext" style="width: 800px;">

<div class="conteneur_ext5" style="width: 176px; height: 249px; margin: 10px 10px 10px 10px;">

<div class="conteneur_int5 " style="background: url('html-adresse-de-ton-image') left bottom; border: 1px solid #ED8485;">

<div class="texte_image5" style="color: #f60069; text-align: center;"><strong>TITRE</strong>

<div style="color: #666699; text-align: right;">&nbsp;</div>

<div style="color: #666699; text-align: right;"><a href="html_Lien_sur_lequel_tu_renvois_les_gens">Voir la Fiche</a></div>

<p><em>TEXTE</em></p>

<div style="color: #7f8ca9;">TEXTE</div>

<p>&nbsp;<strong>Synopsis</strong></p>

<p><strong><span style="color: #ff99cc;">BLA BLA BLA<em><span style="color: #666699;">&nbsp;</span></em></span></strong></p>

<p>TEXTE</p>

</div>

</div>

</div>

<style><!--

<!--

.conteneur_ext5 {float: left;}

.conteneur_int5 {width: 100%; height: 100%; float: left; border-radius:20px 20px 20px 20px;}

 .texte_image5 {  /* texte sur l'image */ 

    border-radius:20px 20px 20px 20px;

    background: #FCE4E7;

    border: 3px solid #ED8485;

    color: #FAADAC;

  font-size: 10pt;

    padding: 10px;

    opacity: 0;

    margin-top: 0px;

    height: 230px;

    }

.texte_image5:hover {    /* survol texte */

    opacity: 0.90;

}

--></style>

</div>

---- à là juste après le <div>) ----- 

Il faut mettre tout ça dans le code  de la page elle-même ou du message

Tu peux changer les parties en vert et Il faut renseigner correctement les parties en rouge :) voila

Après si tu veux plus d'une image tu colles le code qui commence et fini par le orange plusieurs fois, si tu mets div de plus ou de moins entre les deux, les résultats varieront (soit sur une ligne ou en colonne)

oui, ce que je veux c'est de pouvoir mettre un texte sur une image mais que l'image devient transparente pour qu'on puisse voir le texte.

Alors si je comprend bien ton code Yumiko, je dois le mettre dans l'article et si je veux faire plusieurs image, je dois remettre le code plusieurs fois? Est-ce que je peux mettre les images dans un tableau ou il faut absolument qu'elles soient séparé?

_____________________________________________

Je viens de tester, ça fonctionne nickel, merci! seulement, comment on fait pour faire une séparation entre les deux? Quand je mets div ça s'efface après avoir fait ok. 

http://yumenodrama.kazeo.com/sommaire-des-drama-coreens-a147818706

je crois si tu mets un div de plus tu vas avoir un espace entre chaque image :)

pour dans un tableau je sais pas trop surement que ça marche aussi, suffit de bien placé le code (commençant et finissant par le orange)

ou alors tu ajoutes le bout de code de colette dans la partie style

.conteneur_ext {
  margin: 10px 10px 10px 10px; /*valeur à modifier selon ton souhait*/
}

Merci beaucoup! Ça fonctionne! ^w^

Trop cool, moi j'essaie de le remettre dans un tableau en haut de mon blog mais du coup j'ai un peu de mal ça bloque mais je sais pas trop ou je me trompe

mais oui j'ai vu que chez toi ça marche bien :) trop bien