Effets hover image (zoom + affichage du titre d'article) sur page catégorie

WordPress :5.3
Statut : résolu

Ce sujet contient 10 réponses, 2 participants et a été mis à jour pour la dernière fois par ferman, le il y a 4 années et 7 mois.

11 sujets de 1 à 11 (sur un total de 11)

Auteur

Messages
8 avril 2020 à 18 h 30 min #2337698

AdelineMartin
Participant

Padawan WordPress
77 contributions

Bonjour,

Ma configuration WP actuelle :
– Version de WordPress : 5.4
– Version de PHP/MySQL : 7.0.33 / 5.5.30
– Thème utilisé : Neve Enfant
– Thème URI : https://adeline-martin.com
– Extensions en place : Akismet Anti-Spam (4.1.4), Classic Editor (1.5), Etsy Shop (2.2), Forum_wordpress_fr (4.2), Juiz Social Post Sharer (1.4.10), MailPoet 3 (New) (3.46.7), Page Links To (3.3.3), Simple Custom CSS and JS (3.30), Slideshow (2.3.1), UpdraftPlus – Backup/Restore (1.16.23), WP Post Popup (3.5.3), Yoast SEO (13.4.1)
– Adresse du site : https://adeline-martin.com
– Nom de l’hébergeur : Apache

Problème(s) rencontré(s) :

Bonjour,

Je tente depuis plusieurs jours d’appliquer des effets à mes miniatures d’articles.
Je souhaiterais qu’au survol des miniatures, l’image fasse un léger zoom et affiche le titre de l’article.
Exemple de ce que je veux obtenir : https://www.rovinacai.com/portfolio/
Mon site actuellement : https://adeline-martin.com/category/illustration/ (j’ai seulement réussi à mettre un filtre gris au survol dans style.css)

J’ai tenté en javascript mais je ne m’y connais pas assez bien.
J’ai essayé également avec pas mal de plugins mais le soucis c’est que les versions gratuites ne proposent d’appliquer les effets qu’à un article, une image ou une page…
Ce que j’aimerais c’est pouvoir appliquer l’effet à toutes les miniatures de ma page catégorie.
Je pense qu’il faut jouer sur le fichier archive-post.php de mon thème mais je suis un peu perdue !

Merci par avance 🙂

9 avril 2020 à 0 h 09 min #2337748
ferman
Modérateur

Maître WordPress
7272 contributions
Bonjour,

Essayez ce code CSS. Je pense que ça se rapproche de ce que vous voulez. Pour l’exemple j’ai mis deux titres en noir (sur deux images blanches).
```
.post .content{
  padding: 0px;
  transition: transform 1s; /* Animation */
  margin: 0 auto;
}
.post .content:hover {
  transform: scale(1.2); 
 z-index:auto;
}
.entry-title a{position:relative;
bottom:150px;
font-size:15px;
opacity: 0;
	border-style:solid;
	padding-bottom:100px;
	padding-top:120px;
	padding-left:50px;
	padding-right:50px;	
}
.entry-title a:hover{position:relative;
opacity:1;
border-style:none;
filter:brightness(5);
}
#post-5171 .entry-title a:hover, #post-2982 .entry-title a:hover {color:black!important;
font-weight:bold;
}
```
Edit: En regardant de nouveau, ce n’est pas exactement ça. Regardez quand même si ça vous convient.
- Cette réponse a été modifiée le il y a 4 années et 7 mois par ferman.
- Cette réponse a été modifiée le il y a 4 années et 7 mois par ferman.
9 avril 2020 à 0 h 41 min #2337752

ferman
Modérateur

Maître WordPress
7272 contributions

Peut-être mieux avec scale (1.1). Question de goût.

9 avril 2020 à 11 h 04 min #2337784

AdelineMartin
Participant

Padawan WordPress
77 contributions

Mais… merci ! Ça fonctionne !
J’ai effectivement deux trois réglages à trouver (conserver le filtre gris au survol de toute l’image et j’aimerais que l’image subisse un zoom à l’intérieur de son format mais qu’elle ne grandisse pas).
Mais c’est génial ! Je ne pensais pas pouvoir gérer ça avec seulement du CSS !
Ce forum me bluffe d’efficacité à chaque fois, merci beaucoup !

9 avril 2020 à 11 h 34 min #2337786

ferman
Modérateur

Maître WordPress
7272 contributions

Bonjour,

Pour le voile gris, vous pouvez ajouter dans les règles .post .content:hover, opacity:0.5 à régler.

Vous pouvez enlever tout ce qui se rapporte à « border ». Je m’en servais pour me repérer dans les paddings et ne l’ai pas enlevé.

Pour maintenir la taille de l’image, ça doit être possible en rognant l’image. Je n’ai pas cherché à le faire. Regardez ICI.

9 avril 2020 à 13 h 07 min #2337796

AdelineMartin
Participant

Padawan WordPress
77 contributions

Merci !

Pour l’opacité, le soucis en ajoutant dans « post.content:hover » c’est que la transparence s’applique à tout, même au titre, j’avais réussi à n’agir que sur l’arrière plan avec ce code :

« .nv-post-thumbnail-wrap a:hover {
opacity: 0.20 !important;
} »

Il faut que je creuse 🙂

Pour le zoom dans l’image, j’y suis presque ! En ajoutant « overflow:hidden » à plusieurs endroits j’ai pu conserver 3 arrêtes du carré, l’image continue juste à s’agrandir dans la zone du titre.

Quand tout sera comme il faut je posterai le code complet.

9 avril 2020 à 20 h 27 min #2337892

AdelineMartin
Participant

Padawan WordPress
77 contributions

Petite mise à jour, j’ai enfin réussi à forcer le zoom à se restreindre aux 4 arrêtes de l’image avant survol de la souris !
Voici ce que ça donne : https://adeline-martin.com/category/illustration/

J’ai encore des petits soucis avec les titres, savez-vous comment je peux faire pour que le titre apparaisse au survol de l’image ?
Pour l’instant il n’apparaît qu’au survol du titre lui même.

Après j’arrête de vous embêter ! 🙂

Merci

9 avril 2020 à 21 h 02 min #2337898
ferman
Modérateur

Maître WordPress
7272 contributions
Bonjour,

Excellent. Pour avoir le titre au survol de l’image, ajoutez ce petit morceau de code:
```
.entry-title a{position:relative;
	padding-bottom:120px;
	padding-top:20px;
}
```
Une petite limitation: cela marche au survol de la partie inférieure de l’image, pas supérieure. Je ne trouve pas ça gênant du tout: à moins d’attaquer l’image en traître par le haut il n’y a pas de problème. C’est une question de padding et il est impossible de régler ça de façon à couvrir également la zone supérieure. Vous pouvez voir ça avec l’inspecteur. C’est le prix à payer pour le overflow:hidden!

Je ne me casserais pas la tête à remodifier tous les réglages.
- Cette réponse a été modifiée le il y a 4 années et 7 mois par ferman.
10 avril 2020 à 11 h 09 min #2337964
AdelineMartin
Participant

Padawan WordPress
77 contributions
Merci beaucoup pour votre réponse !
J’ai testé avec le padding, en effet, la zone qui réagit au survol et affiche le titre est plus étendue mais j’ai soit le titre, soit l’image d’arrière plan qui baisse en opacité mais jamais les deux en même temps.
Ce n’est pas grave, je chipote ! Je vais laisser ça comme ça et si un jour j’ai le courage de me replonger dedans j’essaierai de trouver une solution.

En attendant voici mon code final pour ceux que ça intéresse :
```
.layout-grid .content >* {
margin: 0 0 0px !important;
}

.post .content{
padding: 0px;
transition: transform 0.3s;
margin: 0 auto;
overflow: hidden !important;
}

.nv-post-thumbnail-wrap a:hover {
opacity:0.5 !important;
}

.post .content:hover {
transform: scale(1.2);
z-index:auto;
overflow: hidden !important;
}

.article-content-col {
overflow:hidden !important;
}

.blog-entry-title a, .entry-title a {
opacity:0;
position:absolute;
color: #FFFFFF !important;
z-index:auto;
text-align:center;
bottom:50%;
top:45%;
left:10px;
right:10px;
padding-left:20px;
padding-right:20px;
padding-bottom:120px;
padding-top:20px;
font-weight:bold;
font-size:12px;
}

.entry-title a:hover {
position:absolute;
color: #FFFFFF !important;
z-index:auto;
text-align:center;
bottom:50%;
top:45%;
left:10px;
right:10px;
padding-left:20px;
padding-right:20px;
font-weight:bold;
font-size:12px;
opacity: 1;
text-decoration: none !important;
}
```
Merci pour votre aide ferman !
- Cette réponse a été modifiée le il y a 4 années et 7 mois par AdelineMartin. Raison: erreur de code
10 avril 2020 à 19 h 50 min #2338035
AdelineMartin
Participant

Padawan WordPress
77 contributions
J’ai finalement passé la journée dessus mais tout marche enfin à merveille !

J’ai découvert la propriété CSS « div:not » qui permet d’exclure des éléments pour qu’ils ne subissent pas l’effet appliqué. J’ai aussi bidouillé les padding et toute l’image affiche maintenant le titre au survol.

Merci encore @ferman !

Si jamais d’autres passent par là, voici le nouveau code :
```
.layout-grid .content > * {
  margin: 0 0 0px !important;
}

.post .content{
  padding: 0px;
  transition: transform 0.3s; /* Animation */
  margin: 0 auto;
  overflow: hidden !important;
  background-color: #474747;

}

.post:hover .content:hover div:not(.entry-title){
	opacity:0.3;
}

.post:hover .content:hover {
  transform: scale(1.2);
}

.article-content-col {
	overflow:hidden !important;
}

.blog-entry-title a, .entry-title a {
	width:auto;
	height:auto;
	opacity:0;
	position:absolute;
	color: #FFFFFF !important;
	text-align:center;
	bottom:30%;
	top:1%;
	left:10px;
	right:10px;
	padding-left:10%;
	padding-right:10%;
	padding-bottom:55%;
	padding-top:45%;
	overflow: visible !important;
	font-weight:bold;
	font-size:12px;
}

.entry-title a:hover {
	width:auto;
	height:auto;
	position:absolute;
	color: #FFFFFF !important;
	text-align:center;
	bottom:30%;
	top:1%;
	left:10px;
	right:10px;
	padding-left:10%;
	padding-right:10%;
	padding-top:45%;
	padding-bottom:55%;
	opacity: 1;
    text-decoration: none !important;
	overflow: visible !important;
	font-weight:bold;
	font-size:12px;
}
```
10 avril 2020 à 21 h 03 min #2338043

ferman
Modérateur

Maître WordPress
7272 contributions

Merci pour le retour. Maintenant c’est parfait; ça valait la peine d’y consacrer une journée. Le code sera une excellente « source d’inspiration » pour ceux qui auront le même genre de problème. Bravo.
Auteur

Messages