Image qui se cache

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

Résolu Image qui se cache

Message par Feuille d'Or le 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
**

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 le Mer 14 Aoû 2013 - 12:52


Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui se cache

Message par Feuille d'Or le 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
**

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 le 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
**

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é le 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})});
 });

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 le Lun 19 Aoû 2013 - 18:16

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

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é le 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})});
 });

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 le Mar 20 Aoû 2013 - 10:30

Génial merci ça marche (: ♥

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


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