recentpopularlog in

piperh : hover   38

a few button transformations with quick code copy. Nothing unusual here but could be handy for speed. Some hover transitions and a few loading spinners
webdesign  web  design  button  hover  loading  snippets  css  gallery  animation  code  copy 
7 days ago by piperh
CSSFX - Beautifully simple click-to-copy CSS effects
collection of copyable hover and button effects. Not essential, some feeble, but could be handy for quick copy and paste
webdesign  web  design  hover  effect  css  transform  transition 
10 weeks ago by piperh
simple popover — week 16/52
nice design for popover card on hover, like a tooltip. Uses css and vanilla js
webdesign  web  design  popover  pop  over  css  js  javascript  script  tooltip  hover  popup  card 
may 2019 by piperh
Fading out siblings on hover in CSS | Trys Mudford
Fading out siblings on hover in CSS - impressive css for fading the siblings of an element when that element is hovered
webdesign  web  design  css  fade  sibling  parent  hover  effect  fading  opacity  animation 
may 2019 by piperh
js that triggers preload of the html of a linked page when you hover the link. Seems dubious to me, but what do I know?
webdesign  web  design  webdev  development  js  javascript  script  speed  performance  instant  page  preload  preloading  html  hover  click 
march 2019 by piperh
Having fun with link hover effects | CSS-Tricks
a couple of OK hover effects, and some terrible ones
webdesign  web  design  hover  effect  link  css  animated 
october 2018 by piperh
Animated SVG Icons - Lordicon - created for web and mobile projects
animated icons free for download. I think they depend on hover, so don't do anything on touchscreen
web  graphic  design  svg  icons  animated  hover 
august 2018 by piperh
Stylized Buttons
codepen of button css animations. Possibly useful how-to ref, using position absolute and :before :after
webdesign  web  design  css  hover  animation  animated 
march 2018 by piperh
CSS grid meets Bauhaus
interesting underline effect for links
webdesign  web  design  css  hover  link  effect  transition  animation 
january 2018 by piperh
Animating Link Underlines | Tobias Ahlin
animated link underline - the underline appears and draws outwards from centre. V easy to apply, uses a transform.
webdesign  web  design  animated  animate  animation  link  underline  hover  transform 
october 2017 by piperh
Balloon.css — CSS tooltips for HTML elements
css-only tooltip code. On touch screen works OK but may not be easy to dismiss tooltip after opening - not clear if the tooltip appears on first touch or second touch - would have to test it.
webdesign  web  design  tooltip  css  hover 
october 2017 by piperh
Tilt.js - A tiny parallax tilt effect for jQuery
jquery plugin to allow a hover tilt effect on an element. If you place another element above it produces a kind of parallax effect.
webdesign  web  design  effect  tilt  jquery  js  javascript  script  parallax  hover  angle  animation 
june 2017 by piperh
Animated CSS Underline Hover Examples
css-only animated underline. Rather neat, no js, but on touch screen (iOS, haven't tried Android) makes links require 2 taps - don't know why.
This is copied to a html page on my disc - see code samples
webdesign  web  design  css  html  underline  effect  transition  css-only  animated  hover 
november 2016 by piperh
javascript - Prefered Alternative to OnMouseOver for touch - Stack Overflow
explanation of equivalence of click events, touch and hover, between mouse ui and touchscreen.
webdesign  web  design  click  hover  touch  touchscreen  equivalent  equivalence  mouse  ui  js  javascript 
july 2016 by piperh
Balloon.css — CSS tooltips for HTML elements
simple css-only library for tooltips, with some limitations (see bottom of page)
webdesign  web  design  css  tooltip  hover 
april 2016 by piperh
Can I use... Support tables for HTML5, CSS3, etc
browser support for MQ "interaction media features".
Allows a media query to be set based on the presence and accuracy of the user's pointing device, and whether they have the ability to hover over elements on the page. This includes the pointer, any-pointer, hover, and any-hover media features
webdesign  web  design  css  mq  media  query  feature  pointer  hover 
january 2016 by piperh
How to deal with :hover on touch screen devices
useful code for adding 'no-touch' class to elements - so you can code for both touchscreen and mouse hover
webdesign  web  design  modernizr  touch  no-touch  touchscreen  hover  tap  drop-down  css  code  coding  responsive  menu  jquery  js  javascript 
january 2016 by piperh
joeldbirch/superfish · GitHub
not vanilla - requires jQuery. Dropdown menus for hover and touch
webdesign  web  design  menu  dropdown  query  js  javascript  hover  touch 
november 2015 by piperh
Hover.css - A collection of CSS3 powered hover effects
some nice effects, some naff. they don't all work very well on touch screen - check before using any of these
webdesign  web  design  hover  effect  css  button  link  transition 
june 2015 by piperh
Flawless clickable drop-down navigation
demo requires click to open dropdown, doesn't open on hover
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
Simple jQuery Drop Down Menu in WordPress | Scott Bolinger
the demo doesn't show dropdown on hover - requires click to open. But might be adaptable
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
James Barnett : Make CSS dropdown menus work on touch devices
haven't tested this, needs jQuery, but on the face of it looks straightforward
webdesign  web  design  menu  hover  click  touchscreen  touch  jquery  dropdown  css  device 
july 2014 by piperh
Drop-Down Navigation: Responsive and Touch-Friendly — Osvaldas Valutis
a tap outside the drop-down will dismiss it. Also you can toggle the menu symbol on touch screen. Script is short, but requires jquery. Actually it's clunky on the mobile and not good for aria.
navigation  menu  css  responsive  mobile  touch  screen  tap  hover  dropdown  web  design  webdesign 
june 2014 by piperh

Copy this bookmark:

to read