Signaler

Ajout texte sur image au survol de la souris

Posez votre question novis - Dernière réponse le 16 août 2017 à 16:12 par novis
Bonjour,

Je souhaite ajouter du texte sur une de mes images qui apparaîtrait lors du survol de la souris. J'ai regardé divers sujet mais je ne sais pas très bien comment procéder.
Mon site est crée avec wifeo, et lorsque je clique sur les paramètres avancés de l'image, il m'est possible d'insérer un code id et css. J'aimerai passer par ce biais.
Merci de votre aide
Novis



Utile
+0
plus moins
Un exemple de ce que j'aimerai ce trouve sur ce lien
http://www.queness.com/resources/html/thumbnail/index.html
merci pour votre aide
Donnez votre avis
Utile
+0
plus moins
Bonjour,

Il suffit d'afficher le code source et de regarder comment il faut faire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Create A Thumbnail With Fading Caption Using jQuery</title>
<meta name="description" content="This time we are going to learn to create another thumbnail effect with fading and transparent caption."/>
<script src="js/jquery-1.3.1.min.js"></script>

<script>

$(document).ready(function() {

 //move the image in pixel
 var move = -15;
 
 //zoom percentage, 1.2 =120%
 var zoom = 1.2;

 //On mouse over those thumbnail
 $('.item').hover(function() {
  
  //Set the width and height according to the zoom percentage
  width = $('.item').width() * zoom;
  height = $('.item').height() * zoom;
  
  //Move and zoom the image
  $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
  
  //Display the caption
  $(this).find('div.caption').stop(false,true).fadeIn(200);
 },
 function() {
  //Reset the image
  $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); 

  //Hide the caption
  $(this).find('div.caption').stop(false,true).fadeOut(200);
 });

});

</script>
<style>
body {
 font-family:arial; 
}

.item {
 width:125px;
 height:125px; 
 border:4px solid #222; 
 margin:5px 5px 5px 0;
 
 /* required to hide the image after resized */
 overflow:hidden;
 
 /* for child absolute position */
 position:relative;
 
 /* display div in line */
 float:left;
}

.item .caption {
 width:125px;
 height:125px;
 background:#000;
 color:#fff;
 font-weight:bold;
  
 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */  
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#0cc7dd;
 font-size:16px; 
 
 /* add spacing and make the whole row clickable*/
 padding:5px;
 display:block;
}

.item .caption p {
 padding:5px; 
 margin:0;
 font-size:10px;
}

.item img {
 border:0;
 
 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both; 
}
</style>
</head>

<body>


<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Cycliner</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="2.gif" alt="Banana Moon" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Banana Moon</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div>
</div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="3.gif" alt="BlueBuck" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">BlueBuck</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="clear"></div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="4.gif" alt="SOSO" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">SOSO</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="5.gif" alt="Buzzsprout" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Buzzsprout</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="6.gif" alt="Sweetcakes" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Sweetcakes</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="clear"></div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="7.gif" alt="Paperbox" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Paperbox</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="8.gif" alt="Alessandro" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Alessandro</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="item">
 <a href="#" rel="nofollow noopener noreferrer" target="_blank"><img src="9.gif" alt="Trento Media" title="" width="125" height="125"/></a>
 <div class="caption">
  <a href="">Trento Media</a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div>
</div>

<div class="clear"></div>



<!-- START: Ignore this, not required by this tutorial -->
<script type="text/javascript">
  if (typeof jQuery === 'undefined') document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"><\/script>');     
  var url = 'http://www.queness.com/post/844/create-a-thumbnail-with-fading-caption-using-jquery';
  var title = 'Create A Thumbnail With Fading Caption Using jQuery';
  var content = '<p>This time we are going to learn to create another thumbnail effect with fading and transparent caption.</p>';
</script>
<script type="text/javascript" src="http://www.queness.com/assets/js/demo.js"></script> 
<!-- END -->

</body>


</html> 


Sinon, il y a beaucoup plus simple, c'est d'utiliser l'attribut "title" :

title="Texte visible au survol"




Donnez votre avis
Utile
+0
plus moins
Bonjour merci de votre réponse,

Je pensais mettre ce type de code:
A:
1<p class="image">
2<img src="tonimage.png" alt="" />
3<span>Ton texte</span>
4</p>


B:
1.image span {
2 visibility: hidden;
3}
4
5.image img:hover + span {
6 visibility: visible;
7}

Mais je ne sais comment l'insérer. Je pensais insérer le code A dans le css et le code B dans la page corps de mon site.
Est ce comme cela?

Merci de votre aide
Novis
telliak 3037Messages postés mercredi 20 septembre 2006Date d'inscription 14 octobre 2017 Dernière intervention - 12 août 2017 à 16:08
Salut,
Je n'ai pas tout lu, mais le code A, c'est du HTML et le code B, c'est du CSS.
Répondre
Donnez votre avis
Utile
+0
plus moins
Bonjour,
J'ai inséré le script de dugenou. Je suis parvenu a augmenter les vignette, insérer mes images, modifier les textes mais le problème et que lorsque je passe la souris sur l'image, le texte n'apparaît pas...
Que faire? AI-je oublié quelque chose?
Merci de votre aide
Novis
dugenou 4846Messages postés mercredi 19 janvier 2005Date d'inscription ContributeurStatut 17 octobre 2017 Dernière intervention - 16 août 2017 à 07:49
Bonjour,

Je ne t'ai pas fourni de code, j'ai simplement copié/collé le code source de la page que tu donnes en exemple.

Je n'ai pas examiné le code, mais il me semble qu'il utilise la bibliothèque JQuery :

<script src="js/jquery-1.3.1.min.js"></script>


Ce que tu ne sembles pas faire.
Répondre
Donnez votre avis
Utile
+0
plus moins
Bonjour,
J'ai insérer le script que dugenou m'a transmis mais l'effet ne fonctionne toujours pas. Je cherche mon erreur sans parvenir à la trouver...
J'ai réussi à redimensionner mes images, à changer les titres... mais l'effet au survol ne fonctionne pas...

Pouvez vous m'aider
Merci beaucoup
Novis
Donnez votre avis
Utile
+0
plus moins
Bonjour,
Je cherche dans le forum d'où pourrait venir mon erreur mais je n'y parviens pas.
Ceci étant, en surfant j'ai trouvé un site super qui donne des codes pour faire des effets de survol:
http://epicadesign.fr/css3-des-effet...survol-dimage/

Le script qui m'intéresse est oscar
Oscar

Code HTML:


<div class="grid">
<figure class="effect-oscar">
<img src="img/10.jpg" alt="img10"/>
<figcaption>
<h2>Warm <span>Oscar</span></h2>
<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
<a href="#" rel="nofollow noopener noreferrer" target="_blank">View more</a>
</figcaption>
</figure>
</div>

Code CSS:


figure.effect-oscar{background:-webkit-linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%);background:linear-gradient(45deg,#22682a 0,#9b4a1b 40%,#3a342a 100%)}
figure.effect-oscar img{opacity:.9;-webkit-transition:opacity .35s;transition:opacity .35s}
figure.effect-oscar figcaption{padding:3em;background-color:rgba(58,52,42,0.7);-webkit-transition:background-color .35s;transition:background-color .35s}
figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:''}
figure.effect-oscar h2{margin:20% 0 10px 0;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
figure.effect-oscar figcaption::before,figure.effect-oscar p{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(0);transform:scale(0)}
figure.effect-oscar:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
figure.effect-oscar:hover figcaption::before,figure.effect-oscar:hover p{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
figure.effect-oscar:hover figcaption{background-color:rgba(58,52,42,0)}
figure.effect-oscar:hover img{opacity:.4}

Là je réussi à insérer les codes; par contre je souhaiterai redimensionner l'effet et le faire ainsi se caler sur l'image mais je n'y parviens pas.

Peut-être saurez-vous m'aider
Merci d'avance

Novis
Donnez votre avis
Utile
+0
plus moins
Personne ne sait?
Donnez votre avis
Utile
+0
plus moins
Bonjour,
concernant le 1er script qui m'intéressait, j'ai compris de quelle manière il fallait fractionner le code.

code html:


<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Peintures" height="125" src="im.jpg" title="" width="125" /></a>
<div class="caption"><a href="">Cycliner</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Banana Moon" height="125" src="2.gif" title="" width="125" /></a>

<div class="caption"><a href="">Banana Moon</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="BlueBuck" height="125" src="3.gif" title="" width="125" /></a>

<div class="caption"><a href="">BlueBuck</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="clear"> </div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="SOSO" height="125" src="4.gif" title="" width="125" /></a>

<div class="caption"><a href="">SOSO</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Buzzsprout" height="125" src="5.gif" title="" width="125" /></a>

<div class="caption"><a href="">Buzzsprout</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Sweetcakes" height="125" src="6.gif" title="" width="125" /></a>

<div class="caption"><a href="">Sweetcakes</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="clear"> </div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Paperbox" height="125" src="7.gif" title="" width="125" /></a>

<div class="caption"><a href="">Paperbox</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Alessandro" height="125" src="8.gif" title="" width="125" /></a>

<div class="caption"><a href="">Alessandro</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div class="item"><a href="#" rel="nofollow noopener noreferrer" target="_blank"><img alt="Trento Media" height="125" src="9.gif" title="" width="125" /></a>

<div class="caption"><a href="">Trento Media</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>


code css:

body {
font-family:arial;
}

.item {
width:125px;
height:125px;
border:4px solid #222;
margin:5px 5px 5px 0;

/* d to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
float:left;
}

.item .caption {
width:125px;
height:125px;
background:#000;
color:#fff;
font-weight:bold;

/* fix it at the bottom */
position:absolute;
left:0;

/* hide it by default */
display:none;

/* opacity setting */
filter:alpha(opacity=80); /* ie */
-moz-opacity:0.8; /* old mozilla browser like netscape */
-khtml-opacity: 0.8; /* for really really old safari */
opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */

}

.item .caption a {
text-decoration:none;
color:#0cc7dd;
font-size:16px;

/* add spacing and make the whole row clickable*/
padding:5px;
display:block;
}

.item .caption p {
padding:5px;
margin:0;
font-size:10px;
}

img {
border:0;

/* allow javascript moves the img position*/
position:absolute;
}

.clear {
clear:both;
}


code js:

$(document).ready(function() {

//move the image in pixel
var move = -15;

//zoom percentage, 1.2 =120%
var zoom = 1.2;

//On mouse over those thumbnail
$('.item').hover(function() {

//Set the width and height according to the zoom percentage
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;

//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});

//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});

});



Je ne comprends toujours pas d'où viens mon erreur. Ensuite j'insère mes lien de direction js et css et peut-être est-ce là mon erreur? Je l'insère à la fin de mon script.

Quelqu'un peut-il m'expliquer mon erreur?
Merci beaucoup
Novis
Donnez votre avis
Utile
+0
plus moins
Merci dugenou,
J'ai réussi à insérer ce code.
J'ai réussi à modifier la police d'écriture mais je n'arrive pas à mettre un effet gras sur le titre.
j'ai ajouté "medium" mais je dois me tromper quelque part:
.item .caption a {
text-decoration:none;
color:#990adb;
font-size:24px;
font-weight:medium;

De plus je souhaiterais centrer les titres et textes en plein milieu de la vignette et y ajouter un cadre avec un effet comme sur l'effet "oscar" de cette page: http://epicadesign.fr/demos/HoverEffectImg/index.html

Quelqu'un pourrait me dire ce que je dois ajouter et où je dois l'ajouter?
Je bidouille pas mal mais là je bloque...

Merci pour votre aide
Novis
Donnez votre avis
Utile
+0
plus moins
je me suis mal expliqué pour la police.
Tout comme dans l'effet oscar, je souhaiterai que le titre qui comporte 2 mots soit présenté de la même manière que dans cet effet. Le premier mot en 'light" et le deuxième en "bold" que dois-je ajouter sur la ligne de code?

Merci beaucoup
Novis

nb: j espere avoir été plus clair...
Donnez votre avis
Utile
+0
plus moins
bonjour,
Après avoir réussi mes divers effets, je souhaite désormais insérer le cadre qui apparaît au survol de la souris et que l'on peut apercevoir dans l'effet oscar de cette page: http://epicadesign.fr/demos/HoverEffectImg/index.html
quelle ligne dois-je ajouter à mon script afin que ce cadre apparaisse et s'adapte automatiquement à ma vignette.
Merci pour votre aide, je ne pensais pas y arriver et jusque là grâce à votre aide, ça avance...
Merci
novis
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !