BOOTSTRAP - CSS - différenciation

[prestaprojet]

Bonjour,

Windows 7 + DUC 4.1.1 + BOX MIAMI + wamp apache 2.4.37 + MYSQL 5.7.24 + PRESTASHOP 1.7.7.3

A l'aide du "Blocs de texte personnalisé"

j'ai ajouté du code bootstrap afin d'avoir 1 tableau avec 3 images pour :

- dans le cas de ma page d'accueil, donner un lien vers des catégories de produits

- dans le cas de page personnalisées, créer un groupe de cadre pour présenter une activité

Ces 2 codes sont donc soit dans :

- "Blocs de texte personnalisé" de la page d'accueil

- "Blocs de texte personnalisé" de ma page personnalisée

Pour rendre vivant la navigation, je souhaite créer des effets au survol de ma souris sur les images que j'ai inséré dans chacun des tableaux soit de ma page d'accueil soit de ma page personnalisée.

J'arrive parfaitement à créer l'effet souhaité en ajoutant le code suivant dans mon fichier custom.css

.col-md-4 {
-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out; }

.col-md-4:hover {
zoom:1.1;
-webkit-transform: scale(1.1);
	transform: scale(1.1);}

Ma problématique est :

Je souhaite aussi que ces effets soit différents entre ma page d'accueil et ma page personnalisée.

Ici quand j’insère ce code l'effet ce répercute partout où j'ai mes tableaux.

Ma question :

Comment différencier mes tableaux et réaliser des effets différents selon les pages où je navigue ?

Merci d'avance pour votre aide

🙂

[Eolia]

Ajoutez une classe spécifique sur vos tableaux et n'appliquez la règle que sur eux

<div class="col-md-4 tableau1">

.col-md-4.tableau1:hover { zoom:1.1; -webkit-transform: scale(1.1); transform: scale(1.1);}

[prestaprojet]

Merci Eolia pour ton aide et tes conseils

ça marche super bien

🙂