BANNIERE - EFFET - CSS - AGRANDISSEMENT AU SURVOL

[prestaprojet]

Bonjour,

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

Ma bannière est en page d'accueil en plein milieu ( wrapper )

Aussi, je l'ai fait s'afficher sur mon footer.

J'aimerai réaliser un effet sur ma bannière qui permettrait au survole de ma souris de faire se rapprocher vers moi en s'agrandissant.

Quelqu'un saurait svp comment en CSS réaliser cette opération sur la bannière au survol de la souris uniquement sur la page d'accueil  ?

Merci d'avance pour votre aide

🙂

[Eolia]

.banner:hover {zoom:1.1}

[prestaprojet]

Bonjour Eolia,

ça fonctionne !

Super

Merci beaucoup

Est-il possible de réaliser selon toi cet effet sur le logo également du site ?

Je vais faire un autre poste au sujet d'une autre problématique de présentation .css qui concerne du code BOOTSTRAP que j'ai inséré dans le "Blocs de texte personnalisé" de ma page d'accueil et un autre emplacement d'une page personnalisée.

Je pense que tu pourras facilement m'aider à le résoudre au vue de ta précédente réponse.

Le sujet du poste sera : BOOTSTRAP - CSS - différenciation

Merci d'avance pour ton aide

🙂

[Eolia]

La même règle est applicable, il suffit de mettre la classe du logo à la place de .banner

[prestaprojet]

Bonjour Eolia,

Merci pour ce retour

J'ai ajouté le code suivant

div#_desktop_logo:hover {
    zoom:1.2;
}

Ceci dit le comportement sur le Logo est différent de celui de la bannière.

Au lieu de s'agrandir, le logo devient plus petit.

Est-ce normal ?

Merci d'avance pour votre aide

🙂

[Eolia]

Faudrait voir avec une url car l'image d'origine a peut-être déjà des contraintes.

[prestaprojet]

Bonjour Eolia,

Mon site est en construction en local donc pour l'url ça va être compliqué.

Quand tu dis l'image a peut-être des contraintes, je devrais vérifier ses dimensions ?

Si oui stp quelles dimensions faudrait-il en px respecter pour l'intégrer proprement au site via l’administration ?

Sinon, quels autres paramètres de l'image devrais-je stp contrôler ?

Merci d'avance pour votre aide

🙂

 

[Shonen]

Salut,

Quid du logo, comme le dit bien Eolia, il est fort probable que Prestashop surcharge pas mal avec du code Bootstrap, et du width:100%.

Essaye plutôt quelque chose dans le style, ça va surpasser les autres règles :

div#_desktop_logo:hover{
  transform: scale(1.2);
}

 

[prestaprojet]

Bonjour Shonen,

Nickel ça fonctionne

Merci

🙂