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

[anne_r]

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 October 25, 2013 by anne_r (see edit history)

[Julien64]

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

[anne_r]

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

[bobbyzed]

Bonjour,

 

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

Quelqu'un pourrait-il m'aider ?

 

Merci d'avance

[Julien64]

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

[bobbyzed]

Merci de votre réponse rapide

Voici mon site http://www.nebulaze.com/fr/6-shop

Edited November 18, 2013 by bobbyzed (see edit history)

[Julien64]

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.

[bobbyzed]

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.

[Julien64]

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.

[bobbyzed]

Ca marche ! Merci !!!

[bobbyzed]

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 November 15, 2013 by bobbyzed (see edit history)

[Julien64]

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

[bobbyzed]

C'est bon, merci pour tout !