Forum - En vrac ! - Images avec Hover Effects

Bonsoir,
Je reprends le fils que j'ai malencontreusement commencé en commentaire d'article. Désolée pour ce "brouillonnage"!
************************************************
Je m'interroge sur la taille de l'image.Si j'ai mis ces lignes de code dans styleplus, suis-je condamnée à utiliser des images carrées de la même taille dans toutes les pages de mon site?

-*-*-*-*-*-*-
Bonsoir Anne,
Non, évidemment, il faut régler la taille dans le style commun. Mais toutes les animations qui utiliseront ce style devront avoir la même taille.
Rien ne t'empêche cependant, de créer une autre série de style commun .view2 (par exemple) d'une autre taille si tu as besoin d'avoir plusieurs tailles dans la même page (c'est le cas ici dans le menu linéaire -carré mais plus petit-).
Heu... le forum est peut-être plus pratique pour ce genre de communication...
Amicalement,
Jean-Denis

---

Rectifié par anne_b64 le 25/11/2016 @ 21:21

Bonsoir
Pour le moment, j'ai tout mis dans la code de la page, mais ça fait un sacré bout de code!
Je vais essayer ta solution d'un autre .view2 et dans ce cas, je pense que je peux tout mettre dans styleplus?
  Merci Jean-Denis.

Anne

Bonjour Anne,

Bien sûr, tout le style peut être mis dans styleplus.css. Il n'y a aucun souci. (J'ai tendance à préférer le mettre dans l'article pour tout avoir sous la main, mais c'est affaire d'habitude sans doute.)

Tu n'as besoin, pour une taille d'image donnée que du style commun et du style qui correspond à (ou aux) effet(s) souhaité(s) en adaptant un peu à ta guise (marges, police, titre, paragraphe ou lien...)

Si tu as besoin de plusieurs tailles d'images alors, il te faut utiliser des classes différentes par taille d'image en remplaçant dans le code commun, dans les codes des effets et dans le corps de l'article view par view2... view3... par exemple.
(Tu peux vérifier dans le code source de ce site, l' "Hover effect" dans le menu linéaire utilise une série de classe view2, puisqu'il peut s'afficher en même temps que l'article ou la nouvelle qui utilisent, eux une série view.)

Si tu places des images dans le contenu "caché", pense à bien utiliser l'identifiant #front-img dans le code et dans le corps de l'article pour l'image de face (cette astuce n'est pas présente dans les scripts originaux de l'auteur, mais je trouvais intéressant de pouvoir le proposer ).

Suivant les effets utilisés, il te faudra plus ou moins adapter, mais rien d'insurmontable... Il m'a fallu pour certains effets "quelques" tentatives  avant d'obtenir un rendu satisfaisant... donc patience... Fais signe en cas de souci et je tenterai de te venir en aide.

Amicalement,
Jean-Denis

PS : Je désactive la réaction à l'article puisque tout se retrouve ici. Si tu souhaites que cela reste activé, fais signe et je le remettrai.

Bonjour Jean-Denis
Merci pour ces explications très complètes.
Dans un premier temps, j'ai réalisé ceci, avec code dans l'article, car oui, tu as raison, la proximité des paramètres est plus aisée.
lien 1      lien 2      lien 3

Je vais tester tous tes conseils sur une page d'essai, la curiosité me pousse.

NB: je n'ai pas su mettre en place l'effet 9 avec mes images rectangulaires.

Bonne journée.
Anne

Re,

Eh bien tu vois... cela fonctionne ! Bravo à toi, très intéressant... Il manque les Cavaliers... (Ah non, nous ne sommes pas au tarot !...)

Pour le 9) il y a surtout un problème d'angle à résoudre... (trigonométrie, en gros niveau 3ème)
Tiens, un lien pour t'y aider :
https://www.assistancescolaire.com/eleve/3e/maths/reviser-une-notion/calculer-la-mesure-d-un-angle-da ns-un-triangle-rectangle-3mtr07

Dans l'exemple fourni par l'auteur (sur son site), il avait des images de 300x200px avec un angle b^ d'environ 56,5°.

Tes images font 180x260px, en appliquant ces mesures, avec les formules du lien ci-dessus, on cherche l'angle b^ et on trouve environ 34,7°.  Attention, dans le script, il y a pour le contenu, une rotation négative... il faudra mettre 90°-34,7° = 55,3°.

Moi, je ne m'étais pas fatigué... j'ai des angles de 45° ! Mais tu as bien fait de le signaler, je complèterai le tutoriel à cet effet.

Amicalement,
 

Bonsoir
J'ai fait quelques essais: ici
1- des images avec transition dans le titre
2- une image avec Hover Effects dans l'édito.

Dans l'essai 2, j'ai supprimé la partie h2, puisque je ne souhaite pas mettre de titre dans la partie affichée au survol de l'image. Mais je n'arrive pas à remonter suffisamment le paragraphe pour que le lien du bas ne soit pas aussi bas justement, il est, à mon goût,  trop près de la bordure de l'image.

J'ai modifié les padding, margin ..... mais je n'ai pas obtenu un résultat satisfaisant.

Sur quoi dois je jouer?

Merci par avance.

Bonjour Anne,

1) Les images avec transitions fonctionnent bien, c'est un petit plus appréciable...

2) Pour le petit souci de l'image avec hover effect, tu dois dans la classe .view p ajouter un margin, par exemple :
.view p { /*attributs paragraphe*/
   font-family: Arial, sans serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #FFFFFF;
   margin-top:7px;
   padding: 1px 6px 0px 6px;
   text-align: center;
}
Essaie cela, je viens de le tester, et à l'oeil... cela me parait correct.

PS: si tu n'utilises pas les titres pour cet effet, afin d'alléger ton code, tu peux supprimer les classes (sans obligation bien sûr... )

.view h2
.view-seventh h2
.view-seventh:hover h2

Amicalement,

Bonjour
Trop bien! C'est exactement ce que j'aurais dû faire.
Merci pour ces conseils, j'ai aussi épuré le code comme tu me l'as indiqué.

Bon dimanche.
Anne