contrast() | CSS-Tricks
▻https://css-tricks.com/almanac/functions/c/contrast
Making product card images pop on hover
Another useful application for contrast() is to highlight an image in a user’s interaction. For example, in a row of image cards, we could increase the image’s contrast and also scale it on hover
.card img {
transition:
filter 0.4s ease,
transform 0.4s ease;
}
.card:hover img {
filter: contrast(125%);
transform: scale(1.05);
}
#3D #parallax effect on #hover
▻https://css-tip.com/3d-parallax-effect
Un petit effet « wow ! »
img {
--s: 300px; /* the image size */
width: var(--s);
aspect-ratio: 1;
box-sizing: border-box;
padding-inline: calc(var(--s)/10) 0;
object-fit: cover;
border-radius: 20px;
transform: perspective(350px) rotateY(calc(var(--_i,1)*10deg));
transition: .5s;
}
img:hover {
--_i: -1;
padding-inline: 0 calc(var(--s)/10);
}#css
Tilt Hover Effects | Demo 2 | Codrops
▻http://tympanus.net/Development/TiltHoverEffects/index2.html
Hover.css - A collection of CSS3 powered hover effects
▻https://ianlunn.github.io/Hover
A collection of #CSS3 powered #hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
#Hover Effect Ideas | Set 1
▻http://tympanus.net/Development/HoverEffectIdeas
An inspirational collection of subtle hover effects
Le hover a-t-il encore un sens de nos jours, avec tous ces appareils tactiles ?
Enfin, en décoration oui, pour signifier que la souris passe sur un élément ayant une interaction (lien, bouton, essentiellement).
Mais pas pour faire apparaître autre chose : on voit que dans certains exemples ça fait apparaître des liens ou boutons en plus (favoris, télécharger, etc), et dans presque tous du contenu textuel supplémentaire.
La logique qui fait qu’en tactile, un truc en hoover apparait au premier clic, et qu’une deuxième clic déclenche ce qui serait un clic dans un appareil « normal », n’est pas plus ou moins universelle ?
Je n’ai pas de statistiques mais ce n’est pas du tout une fonctionnalité reconnue et documentée, au départ c’est juste un ajout sur le Safari de iOS :
▻http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem
▻http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices
▻http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices
À chaque fois c’est « on Apple », « on iOS ». D’autres peuvent avoir copié mais au départ c’est ça.
Hendo Hoverboards - World’s first REAL hoverboard by Hendo Hover — Kickstarter
▻https://www.kickstarter.com/projects/142464853/hendo-hoverboards-worlds-first-real-hoverboard
▻https://d2pq0u4uni88oo.cloudfront.net/projects/1415522/video-456349-h264_high.mp4
The #Responsive #Hover Paradigm ◆ 24 ways
▻http://24ways.org/2013/the-responsive-hover-paradigm
#CSS #transitions and #animations provide web designers with a whole slew of tools to spruce up our designs. Move over ActionScript tweens! The techniques we can now implement with CSS are reminiscent of Flash-based adventures from the pages of web history
Non Hover | Trent Walton
▻http://trentwalton.com/2010/07/05/non-hover
Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.
#hyperliens #hyperlinks #hover #non-hover #mouseover #tactile
Retour vers le Futur : l’Hoverboard est disponible !
►http://www.presse-citron.net/lhoverboard-de-retour-vers-le-futur-est-disponible-en-pre-commande
Mattel, la célèbre marque de jouets, propose en pré-commande l’emblématique Hoverboard du film « Retour vers le Futur », pour le plus grand plaisir des fans de la saga.
Cookbook/Navigation - jQuery JavaScript Library
►http://docs.jquery.com/Cookbook/Navigation
#menu #hover #over #jQuery #javascript
hoverIntent jQuery Plug-in
►http://cherne.net/brian/resources/jquery.hoverIntent.html
#jquery #plugin #javascript #hover #usability #webdev #ui #hoverintent