Partage

survol particulier d'images en tant que lien HTML

survol d'images pour lien HTML

Sujet résolu
8 février 2018 à 8:58:06

Bonjour;

Au cours de ma navigation internet; j'ai trouve ce site  : https://vote.marocwebawards.com/application/coop-maroc-89

qui comprend un style de survol d'images en tant que lien HTML

J'aimerais bien savoir si quelqu'un peut m'indiquer ce processus de création de lien comment on peut le générer


Merci pour l'aide

8 février 2018 à 9:24:47

Bonjour,

C'est assez simple, il suffit de regarder comment cela fonctionne avec l'inspecteur de ton navigateur.

En résumé : au moment du survol de la div .candidat qui englobe l'image et son lien se déclenche une transformation CSS utilisant la fonction scale() (https://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html#scale) pour agrandir l'image. Il y a de plus un overflow:hidden sur la div .candidat pour cacher ce  qui sort du contenant.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
8 février 2018 à 9:26:12

Salut,

Même si je ne m'y connais pas des masses, je pense que ça se fait en javascript.

Staff 8 février 2018 à 10:34:23

Bonjour BebertBeberr. Si tu ne t'y connais pas des masses, il vaut mieux laisser parler ceux qui savent bien afin d'éviter les mauvaises informations.
FAQ 3D. ▲up▲ Billet Du Coin. | Pas de demande d'aide par MP ni par mail, le forum est là pour ça :)
8 février 2018 à 14:43:13

bonjour;

en cherchant de ma part j'ai trouve ceci : https://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/

seulement le lien que j'ai poste auparavant comme exemple:https://vote.marocwebawards.com/application/coop-maroc-89

on remarque bien qu'il ya un zoom de l'image limite par le bloc avec une écriture au dessous qui reste figée et n'est pas mise en relief comme pour l'image

Merci pour toutes vos informations

-
Edité par hamada_66 8 février 2018 à 14:46:45

8 février 2018 à 15:31:03

C'est exactement ce dont je te parlais ce matin : l'effet de zoom est dû à la propriété CSS transform qui se déclenche au survol de l'image. Propriété qui affecte uniquement l'image et pas le texte.

C'est un effet assez joli mais qui reste ultra-basique avec un tout petit peu de réflexion. Je t'ai quasiment tout dit mais comme tu débutes je vais te donner quelques pistes supplémentaires pour que tu trouves seul :

Pour le HTML tu as besoin d'une div qui contient ton lien et à l'intérieur de ce dernier ton image et ton texte.

Du côté du CSS, il te suffit d'une transformation CSS (voir le lien dans mon premier post) qui augmentera la taille de l'image au survol de cette dernière et de la propriété overflow:hidden sur ta div générale afin de masquer l'image qui s'agrandit.

Avec ces indications, la possibilité de regarder le code source de ton exemple ainsi que le lien de mon précédent message tu n'auras aucun souci pour trouver la solution. ;)

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
8 février 2018 à 16:20:52

salut;

j'ai déjà bien compris et teste d'effet de zoom localement avec sucées

actuellement j'ai trouve ce site qui explique bien ce que je cherchais : http://www.rbastien.com/blog/2014/01/appliquer-effet-zoom-sur-les-images-lors-du-survol/

en tous cas, merci pour toutes vos informations

-
Edité par hamada_66 8 février 2018 à 16:25:30

8 février 2018 à 17:55:56

@-L0Lock-

 Je plussois,  Mais du coup je me demandais, si on répond :

"Je connais la réponse, mais j'ai la flemme de l'écrire"

Ca rentre dans la même catégorie ?

@ HamadaAlaouiTiens comme çà je ne serais pas passé que pour dire des bêtises ;)

https://www.web-eau.net/blog/15-effets-css3-pour-vos-images

Compos sui.
8 février 2018 à 18:14:08

bonjour;

pour éclaircir les idées a "exen "

lorsque j'ai poste le message au premier coup je ne savais que c'est un effet de zoom par la propriété transform css qu’après la première réponse de "Mewen_bzh". a ce moment j'ai refait mes recherches sur ce effet de transform et scale en css

j'ai ainsi mentionne les liens dans le sens du partage d'information, dont voici un autre lien : https://jsfiddle.net/wf7twxo1/embedded/result,html,css/

merci

Staff 8 février 2018 à 19:02:04

@exen

Dire à quelqu'un qu'on connait la réponse sans pour autant la donner ni fournir une piste pour la trouver, formulé ainsi ça me paraît être au mieux de la moquerie ou du troll, donc pas dans la même catégorie qu'une mauvaise info hasardeuse et une bien pire réponse dans un forum d'entraide. Mais c'est un autre sujet donc on n'en dira pas plus ici.

FAQ 3D. ▲up▲ Billet Du Coin. | Pas de demande d'aide par MP ni par mail, le forum est là pour ça :)
8 février 2018 à 19:06:17

Lol je comprend pour ton post, mais le sujet de mon post n’était pas pour ça du tout, en fait c’était une joke pour LOLlock vis-à-vis de BebertBeberr   qui dit un truc sans savoir de quoi il en retourne. Et là je me pointe et dit et bien moi je n'ai rien à dire même si je sais.

Et de la comme je suis un gentil petit gars, je te pose quelque démo de jolie zoom et animes faites entièrement en CSS .

:D

Compos sui.
9 février 2018 à 9:32:37

Et tu as raison. C'est en cherchant que l'on apprend et que l'on retient le mieux. Il ne faut juste pas avoir peur de se tromper. Si tu savais le nombre de grosses erreurs bêtes que j'ai fait à mes débuts de développeur... Et je te rassure j'en fais encore aujourd'hui...

Maintenant que tu connais la propriété CSS transform je peux te montrer la démo que je t'ai fait, tu la comprendras plus facilement : https://codepen.io/Mewen/pen/MQJRKK

Tu as un exemple avec un effet de zoom et en bonus un exemple avec un effet de dézoom (tout aussi simple à faire : l'image est agrandie en CSS et reprend sa taille normale au survol).

N'hésite pas non plus à lire les cours sur les transformations CSS : 

https://openclassrooms.com/courses/utilisez-les-effets-avances-de-css-sur-votre-site/les-transformations-2d-1

https://openclassrooms.com/courses/animez-votre-site-avec-css3




HamadaAlaoui a écrit:

lorsque j'ai poste le message au premier coup je ne savais que c'est un effet de zoom par la propriété transform css qu’après la première réponse de "Mewen_bzh". a ce moment j'ai refait mes recherches sur ce effet de transform et scale en css



Recherche l'avis de développeurs front : Devenir un meilleur dev front ?

survol particulier d'images en tant que lien HTML

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown