Sujet Précédent Sujet Suivant

Ajout texte sur image au survol de la souris

Fermé
novis - 11 août 2017 à 12:00
 novis - 16 août 2017 à 16:12
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



11 réponses

Réponse 1 / 11
novis
14 août 2017 à 15:40
Personne ne sait?
1
Réponse 2 / 11
novis
11 août 2017 à 12:15
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
0
Réponse 3 / 11
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
Modifié le 11 août 2017 à 14:59
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"




Courage, le bout du tunnel n'est pas loin, il suffit de se retourner.
0
Réponse 4 / 11
novis
12 août 2017 à 12:13
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
0
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 874
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
novis
12 août 2017 à 17:53
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
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
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.
0
Réponse 6 / 11
novis
13 août 2017 à 17:23
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
0
Réponse 7 / 11
novis
14 août 2017 à 13:35
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
0
Réponse 8 / 11
novis
15 août 2017 à 16:15
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
0
Réponse 9 / 11
novis
16 août 2017 à 10:41
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
0
Réponse 10 / 11
novis
16 août 2017 à 11:30
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...
0
Réponse 11 / 11
novis
16 août 2017 à 16:12
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
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Comment savoir comment on nous a ajouté sur Snap
Laura -
Mariana -

13 réponses
Sur la plage...
kriiisss -
Utilisateur anonyme -

6 réponses