Jump to content
anne_r

nom + prix au passage de la souris sur photo produit sur homefeatured + product-list

Recommended Posts

bonjour,

je souhaiterais voir s'afficher les titre et prix du produit sur la photo produit au passage de la souris sur la photo plutot que de l'afficher en dessous.

 

Comment faire?

merci de votre aide

anne

Edited by anne_r (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

 

Pour avoir ce type d'effet, quelques modifications CSS et le tour est joué.

Commencez par positionner vos éléments aux endroits ou vous souhaitez les voir apparaitre, en l'occurrence sur l'image produit. Ensuite appliquez une opacité 0 à ces éléments et une opacité 1 au moment du survol de l'image à ces mêmes éléments.

 

Si vous voulez plus de précisions, mettez un lien vers votre site pour que je puisse vous guider plus facilement ;)

Share this post


Link to post
Share on other sites

bonjour,

merci pour votre réponse qui m'a bien aidée, je me compliquais la vie, c'est chose faite.

Le site n'est pas encore en ligne, je mettrai le lien quand il sera fini.

encore merci

anne

  • Like 1

Share this post


Link to post
Share on other sites

Bonjour,

 

J'aimerais faire exactement la même chose mais je n'y arrive pas.

Quelqu'un pourrait-il m'aider ?

 

Merci d'avance

Share this post


Link to post
Share on other sites

Bonjour,

 

La démarche est expliquée dans mon post précédent. Si vous n'y arrivez pas et que vous avez besoin de plus d'aide, mettez un lien vers votre site pour qu'on puisse vous guider plus précisément.

 

Si votre site n'est pas encore en ligne, passez le en ligne et revenez nous donner le lien ;)

Share this post


Link to post
Share on other sites

Ok alors par rapport à votre site il faudrait rajouter une position relative aux éléments "#center_column ul.categorie_product li" que vous trouverez dans le global.css, à la ligne 970.

 

Ensuite il faudrait englober les éléments <h3>, <p class="product_desc"> et <p class="pprice"> dans une div avec une classe spécifique. Et à cette div, vous appliquez un style:

position: absolute;
top: 50%;
left: 0;
opacity: 0;

Ensuite vous rajoutez une propriété au passage de la sourie sur vos éléments li:

#center_column ul.categorie_product li:hover .LA_CLASSE_DE_LA_DIV {
       opacity: 1;
}

Après vous pouvez agrémenter de mise en forme et d'effets.

Share this post


Link to post
Share on other sites

Merci pour l'aide

Je ne sais pas quelle position mettre pour #center_column ul.categorie_product li"

Après j'ai essayé de regrouper les éléments mais je ne suis pas sûre de l'avoir fait correctement et je ne sais pas non plus comment appliquer un style.

Share this post


Link to post
Share on other sites

Ok alors pour le positionnement des <li> il faut modifier le fichier global.css et ajouter à la ligne 970, à la suite des autres instructions:

position: relative;

Ensuite pour votre div c'est presque bon, il faut mettre une classe et non un id car il y en a plusieurs sur la même page, donc quelque chose comme:

div class="passage-souris">

Et pour finir dans le global.css ajouter

.passage-souris {
     position: absolute;
     top: 50%;
     left: 0;
     opacity: 0;
}
#center_column ul.categorie_product li:hover .passage-souris {
     opacity: 1;
}

Ça devrait déjà avoir l'effet voulu, à ajuster ensuite suivant vos besoins.

Share this post


Link to post
Share on other sites

Comment faire pour que le background hover que j'avais mis a la base reste quand je pointe sur le titre et le prix ?

Et je n'arrive pas centrer le titre et le prix par rapport à l'image

Edited by bobbyzed (see edit history)

Share this post


Link to post
Share on other sites

Alors pour centrer les textes il faut rajouter à cet élément ".passage-souris", la propriété "width:100%;"

 

Pour l'effet de hover je pense qu'en le mettant sur le <li> et non sur le <img> ça devrait le faire.

Plutôt que

#center_column .categorie_product img:hover

Mettre

#center_column ul.categorie_product li:hover img

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More