anne_r Posted October 23, 2013 Share Posted October 23, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Julien64 Posted October 23, 2013 Share Posted October 23, 2013 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 Link to comment Share on other sites More sharing options...
anne_r Posted October 25, 2013 Author Share Posted October 25, 2013 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 1 Link to comment Share on other sites More sharing options...
bobbyzed Posted November 15, 2013 Share Posted November 15, 2013 Bonjour, J'aimerais faire exactement la même chose mais je n'y arrive pas. Quelqu'un pourrait-il m'aider ? Merci d'avance Link to comment Share on other sites More sharing options...
Julien64 Posted November 15, 2013 Share Posted November 15, 2013 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 Link to comment Share on other sites More sharing options...
bobbyzed Posted November 15, 2013 Share Posted November 15, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Julien64 Posted November 15, 2013 Share Posted November 15, 2013 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. Link to comment Share on other sites More sharing options...
bobbyzed Posted November 15, 2013 Share Posted November 15, 2013 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. Link to comment Share on other sites More sharing options...
Julien64 Posted November 15, 2013 Share Posted November 15, 2013 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. Link to comment Share on other sites More sharing options...
bobbyzed Posted November 15, 2013 Share Posted November 15, 2013 Ca marche ! Merci !!! 1 Link to comment Share on other sites More sharing options...
bobbyzed Posted November 15, 2013 Share Posted November 15, 2013 (edited) 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) Link to comment Share on other sites More sharing options...
Julien64 Posted November 16, 2013 Share Posted November 16, 2013 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 Link to comment Share on other sites More sharing options...
bobbyzed Posted November 18, 2013 Share Posted November 18, 2013 C'est bon, merci pour tout ! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now