Image qui se cache

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image qui se cache

Message par Feuille d'Or Mer 14 Aoû 2013 - 11:54

Bonjour tout le monde (:
Voilà je suis admin d'un forum et j'aimerais faire un tout beau et nouveau message d'accueil... Pour ça j'avais une petite idée... Vous voyez à peu près quand je vous dis que j'aimerais mettre une image et en dessous le contexte du fow? Et bien c'est ça que je ne sais pas faire et que je souhaite....
Explication plus en détails (pour ceux qui n'ont pas compris):
L'image je souhaiterais qu'elle soit au-dessus du contexte et dès qu'on passe la souris dessus, l'image se décale pour laisser place au contexte...

Si vous n'avez toujours pas compris un schéma s'impose (;

Spoiler:


Dernière édition par Feuille d'Or le Mar 20 Aoû 2013 - 10:30, édité 1 fois
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Adam_sfp Mer 14 Aoû 2013 - 12:52

Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Feuille d'Or Mer 14 Aoû 2013 - 21:13

Merci j'essaierai plus tard mais là je pars en vacances est-il possible de garder mon sujet pour reposter si j'ai un problème ? (:
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Feuille d'Or Lun 19 Aoû 2013 - 16:17

J'ai essayé pourtant et je n'ai pas réussi...
Résultat:
Spoiler:

Ce que j'ai mis dans mon mess d'accueil:
Code:
<div class="bloc-tfa">
    <img src="http://i71.servimg.com/u/f71/18/14/53/38/a_bmp10.jpg" alt="" />
    <p>
       ICI LE CONTENU
    </p>
</div>
Dans mon CSS:
Code:
/*code image qui se cache*/
.bloc-tfa {      
     background: #b5c9d9;
     position: relative;
     overflow: hidden;   
     height: 120px;         
     width: 250px;
     margin: 0;
     padding: 0;
     border: 1px solid #7da2bc;   
}
.bloc-tfa  p{
     display: block;
     color: #00305c;         
     height: 120px;
     width: 250px;
     margin: 0;         
     padding: 0;            
}         
.bloc-tfa img{         
     position: absolute;         
     top: 0;         
     left: 0;               
}

/*fin code image qui se cache*/
Et dans mon code javascript
Code:
$(function()
$('.bloc-tfa_p').hover(function(){ $(this).find('.img_2').animate({left:'250px'},{queue:false,duration:500}); }, function(){
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Invité Lun 19 Aoû 2013 - 16:35

Bonjour,

essai avec ce javacript

Code:
$(function(){
  $('.bloc-tfa').hover(function(){$(this).find('img').animate({top:'120px'},{queue:false,duration:500})},function(){$(this).find('img').animate({top:'0px'},{queue:false,duration:500})});
 });
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Feuille d'Or Lun 19 Aoû 2013 - 18:16

Merci ça marche (:
Mais comment on fait si on veut que l'image aille à droite?
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Invité Lun 19 Aoû 2013 - 18:35

Comme ceci mettre left au lieu de Top Smile

Code:
$(function(){
  $('.bloc-tfa').hover(function(){$(this).find('img').animate({left:'120px'},{queue:false,duration:500})},function(){$(this).find('img').animate({top:'0px'},{queue:false,duration:500})});
 });
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Feuille d'Or Mar 20 Aoû 2013 - 10:30

Génial merci ça marche (: ♥
Feuille d'Or

Feuille d'Or
**

Messages : 91
Inscrit(e) le : 15/06/2013

http://chatmalo.forumsactifs.com/
Feuille d'Or a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum