Hover Effect Στα Products Με Description Και Combinations

[gianvas]

γεια σας

 

Θέλω να κάνω το συγκεκριμένο hover effect ,όπως το site παρακάτω.

 

http://www.perpetto.pl/kategorie/oleje/castol

 

Να εμφανίζει description δηλαδή και atributtes και τιμή.

 

Γνωρίζει κανείς?

Ευχαριστώ

[Kogkalidis]

Καλησπέρα φίλε μου. Να σε καλοσορίσω από μεριάς μου στην ελληνική κοινότητα του Forum.

Αν και δεν έχεις ψάξει καθόλου στο διαδίκτυο, διότι είναι πολύ απλή η διαδικασία (πρόκειται για απλή CSS), ορίστε η εξήγηση:

Όταν δε βρίσκεσαι εντός του div class="product-item" το div class="product-description" έχει opacity=0. Ενώ όταν βρίσκεσαι εντός του div class="product-item" (χωρίς να πατάς κάτι με το ποντίκι), όταν κάνεις "hover" δηλαδή όπως λέγεται με την τεχνική ορολογία του, μεταβάλλεται το opacity του div class="product-description" και παίρνει την τιμή 1

Αυτό το διαπιστώνεις από το αρχείο css και συγκεκριμένα τη σειρά 8101. Εκεί έχεις την εξής εντολή:

.product-item-column .product-item:hover .product-image .product-description {
    opacity: 1;
}

Που είναι αυτό ακριβώς που σε εξήγησα περιφραστικά.

Αν χρειαστείς κάτι άλλο θα είμαι στη διάθεση σου, απλώς ψάξε λίγο περισσότερο ώστε να επεμβαίνουμε σε πιο ψαγμένα προβλήματα. Διότι ως χώρα έχουμε μείνει πίσω (αναφέρομαι καθαρά στην κοινότητα της PrestaShop)

Φιλικά,

Κωνσταντίνος Α. Κογκαλίδης

[gianvas]

 σε ευχαριστώ πολύ για την απάντηση αλλά νομίζω δεν με κατάλαβες τι θέλω να κάνω.Είμαι κιόλας κάπως καινούργιος στην prestashop. Την παραμετροποίηση με css ξέρω να την κάνω.

 

Φτιάχνω ένα site όπου τα products στην homepage αυτή την στιγμή όταν κάνεις hover εμφανίζει την δεύτερη image του product .παραθέτω link https://www.oilparts.gr/

 

Θέλω,όπως στο site που έβαλα παραπάνω, να μου εμφανίζει το description του προιοντος και τά combinations ξεχωριστά για κάθε προιον. μεσω κάποιου tpl file δεν γίνεται αυτό?

 

Σε ευχαριστώ πολύ και πάλι 

[Kogkalidis]

Χρειάζεται επέμβαση τόσο στο tpl όσο και προσθήκη κατάλληλων εντολών στο κατάλληλο αρχείο css.

Πρέπει να αφαιρέσεις απ' το tpl του πρόσθετου που προβάλει τα προϊόντα (featured ή κάτι τέτοιο) το span class="product-aditional"

και στη συνέχεια να πετάξεις το block, που θέλεις να εμφανίζεται στο hover, μέσα στο div class="product-block" και δώσ' του μια ειδική κλάση

έστω div class="tapanda", μετά θα πας στο css και θα προσθέσεις ένα .tapanda{display:none; [ΚΑΙ ΟΤΙ ΑΛΛΟ ΚΩΔΙΚΑ ΘΕΣ]} κι ένα .product-block:hover .tapanda{display:block}

 

Αναμένω νέα σου