Two examples of hover styles on images

https://alexwlchan.net/2024/hover-states/

by speckx • 2 years ago

41 56 2 years ago

Spivak2• 2 years ago

Aren't you describing https://developer.mozilla.org/en-US/docs/Web/CSS/outline?

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

If you s/border/outline in the dev console on the image you get what you want.

benatkin2• 2 years ago

Outline is used for :focus and :focus-visible, so box-shadow is nice to have for hover so you don't have to repurpose the outline for it.

the_other5• 2 years ago

it seems to me that :hover and :focus are doing the same job in this case - indicating the target of the next action. I don’t see this as “repurposing”.

Maken• 2 years ago

Is there any directive against defining an outline for :hover?

nomdep2• 2 years ago

That’s why do you use `border-color: transparent` instead

KTibow2• 2 years ago

That can make the image take up excessive space, or as the article says:

..., or an always-on transparent border that only changes colour when you hover – but those can interfere with other CSS rules

oneeyedpigeon3• 2 years ago

outline would seem to be the most appropriate solution here, unless I'm missing something.

nomdep2• 2 years ago

Yes, you are right

markdown• 2 years ago

Always nice to see CSS on here, but we figured this out 15yrs ago. Are the kids rediscovering hover styles?

wackget3• 2 years ago

You haven't noticed? Literally everything in web development has been in a constant cycle. Everything is reinvented and made significantly worse.

Next week: How to run your Docker React Node Babel Webpack Svelte grocery list application at the EDGE using Kubernetes on AWS serverless EC2 instances with Cloudflare workers.

EDIT: I forgot we're gonna use Bootstrap too.

arcanemachiner• 2 years ago

Bootstrap? So passé. Just sprinkle in a dash of Tailwind:

<button class="bg-blue-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 active:scale-95">Hello world!</button>

KTibow2• 2 years ago

The social icons are neat, but using filter would be shorter than manually setting normal and hover styles, at the cost of having inconsistent gray colors:

  .icon:not(:hover) {
    filter: grayscale(1);
  }

wackget3• 2 years ago

Why go for the simple method when you can instead simply hand-edit SVG code then add two extra HTML elements per icon?

lolinder• 2 years ago

at the cost of having inconsistent gray colors

Which, to be fair, is a pretty high cost. The consistency of the greys that only differentiate on hover is half the aesthetic value of the effect.

hnbad3• 2 years ago

Also this would not work for GitHub, for example, where the hover color is black, which is already "grayscale".

afloatboat• 2 years ago

SVG elements also support currentColor for the fill property, which is linked to CSS’s color property.

element { color: hsl(0 0% 0%) }

One advantage is that you can target the parent element and the SVG will change automatically.

You can also create multiple “shades” by having currentColor on multiple paths with different opacity.

wruza7• 2 years ago

A good hover style reminds me of how fast and responsive our computers can be, if we let them. For example, I add a thicker underline when you hover over a link on this site, and it appears/disappears almost instantly as I move my cursor around. It feels snappy; it makes me smile.

Sigh. We managed to raise a generation for which an instant interaction on a 1000+MHz multi-core gpu-accelerated 1000+MB/s io system feels snappy and that’s special. Good job, goob job.

you could add a negative margin to offset the border, or an always-on transparent border that only changes colour when you hover – but those can interfere with other CSS rules

The worst part of CSS is its globalness. You can’t have two paddings sourced from different subsystems, can’t name a border so you could address it specifically (e.g. as in el:border(myhover) {background: <gradient>}). CSS is so poor and antipattern and nobody bats an eye. You write an article like this and already see all these fragile hacks advices coming in, normalized by years of stockholming through even most basic layouts.

wackget3• 2 years ago

We managed to raise a generation who think it's acceptable for JavaScript to be required in order to render a single page.

For some "web developers", this is literally how they create a page:

    import React from 'react';
    
    function App() {
        return (
            <div>
                <h1>Hello world!</h1>
                <p>This is my HTML page.</p>
            </div>
        );
    }
    
    export default App;

Spivak2• 2 years ago

I can't really knock it when no one is ever going to ask them to do anything else. HTML might as well be assembly. It's starting to feel pretty vestigial at this point, it's all just different colored divs and aria labels. Elements on the screen as a human would perceive them stopped mapping to single elements ages ago.

For some "systems developers" this is literally how they create a program:

    #include <stdio.h>
    
    int main(int argc, char *argv[]) {
        println("Hello world.");
    }

GTK/Unity/WinForms, everyone has their working level of abstraction.

wruza7• 2 years ago

I don’t see anything bad here, tbh (ignoring my acute allergy to react—alikes). The problem is not how they write. DX is a good thing. Interactivity too. The problem is what happens at runtime: fetch html, fetch script, fetch data multiple times. It should be fetch html which contains a script which contains all the necessary data and creates elements and sets handlers.

Cthulhu_2• 2 years ago

It's ironic because I'm sure this lament has been voiced in one way or another with every generation of developers.

Anyway, your comment feels like a straw man; I don't know anyone who actually believes what you're claiming, nor is this sentiment anywhere on HN. The closest things are discussions about whether your website should work with JS disabled whenever a too-clever website is linked.

hnbad3• 2 years ago

As someone who experienced the rise of JavaScript, CSS and modern frontend frameworks, your comment gives me a chuckle because I'm pretty sure using JavaScript for hover effects pre-dates the ability to do that reliably using CSS.

caporaltito• 2 years ago

"The future is now, old man!"

croes• 2 years ago

Isn‘t that what the id selector is for?

the_other5• 2 years ago

The worst part of CSS is its globalness.

But global-ness is what you want from design directives. You want all your buttons to look the same, your links consistent. You want to define your base fonts once and then not have to worry about it for the rest of the build. You want to have your vertical rhythm (line spacing) repeated on most pages. You want most pages to have the same background and foreground colours. CSS syntax gives you all that for free.

Giving multiple elements the same border definitions is easy:

    elem,
    another-elem,
    .some-class,
    #just-this-one {
        border: whatever;
        background: swoosh;
    }

When I look at the hoops you have to leap through to get the same behaviour using any of the frameworks, my mind reels. Build steps, runtime libraries, repeated syntaxes in the mark-up...

I accept that managing things like the shared border example can get fiddly. SASS made it easier; some flavour of react-plus-css-helper-library thing can make it easier, kinda, if you squint. But it's actually _very_ simple to write the basic core idea in plain CSS. Personally, I feel that the discipline required to manage larger CSS codebases isn't that different than the discipline required to write good JS or TS; we just have a habit of pretending we shouldn't need to do that and wishing someone else would (via a library, or changing the standards). I don't know why we're happy doing it in JS or TS, but not CSS.

wruza7• 2 years ago

That’s as easy as

  fooModule.*(x),
  bar(x),
  Math.floor(x) {
    if (x === 42) return “oops”;
    return thisfunc(x);
  }

Or as COMEFROM. The proper way for modularity is to import subtrees of declarations and have them applied explicitly.

  // elem.css
  elem {
    use border-bg from “./bbg.css”;
  }

  // html
  <div>
    import elem from “./elem.css”
    <elem/> // has it
  </div>
  <elem/> // doesn’t

I don’t want aspect-oriented/comefrom globalness. It is an antipattern and dead tech in which you have to runtime-debug an element to learn its properties in each case, cause there’s no single place to treewalk your logic from.

6510• 2 years ago

like so

  img{border: 10px solid transparent;transition:border 0.3s}
  a:hover img{border: 10px solid red;}

Rugu16• 2 years ago

I really miss hover effects on mobile, wish there was a way for this !

Cthulhu_2• 2 years ago

There were / are / will be devices that support detecting hovering a finger or stylus away from the screen, so engineering-wise it's possible; it's just not included in the UX guidelines for the respective platforms.

bauerd• 2 years ago

It could also be implemented with eye tracking.

rererereferred3• 2 years ago

You can use :active, which should work when you press the button. You can still move your finger and release outside the button to avoid the interaction. The only problem is the finger covering the effect.

wruza7• 2 years ago

Short-press and scroll a little, this usually starts :hover mode. You’ve probably seen it accidentally triggering previews on various video platforms.

It works in TFA.

zooi• 2 years ago

Use outline instead:

  outline: solid 10px red;

Nearly identical to border, but without affecting layout at all.

maskros• 2 years ago

The CSS outline property is (was?) unreliable on Safari. Things like the border-radius don't affect the outline shape -- it's always square even if you to to create some Apple-patented rounded rectangles using border-radius.

mikae1• 2 years ago

Why this over box-shadow?

Timwi2• 2 years ago

It's already been mentioned that instead of box-shadow perhaps outline is a better choice for the image frame.

For the icons, I don't understand why the author believes that they need to have two copies of the icon inside the SVG. You can style every property of every element using CSS. If your icon is a single path element, it should remain a path element and be styled something like this:

  svg.social path { fill: gray; }
  svg.social:hover path { fill: #8df; }

Of course it's possible that I'm missing something, but if all you want is changing color on hover, duplicating the item and using a mask is overkill.

Izkata• 2 years ago

I think that only works when the svg is embedded in the html, not when it's pulled in from a separate file through something like an <img> tag.

chrisandchris• 2 years ago

Yep, does only work with embedded SVG and not for foreign resources.

Timwi2• 2 years ago

Although that's a good call as I hadn't considered that, I still don't see why you want to use a mask. Surely you just need two tiny SVG files and show only one or the other. And since they're tiny, I would absolutely embed them directly, which is why I didn't consider the case of an img tag.

JimDabell• 2 years ago

Toggling between greyscale and colour is nice, but often you want the colour to be visible by default, and greying something out when you hover over it incorrectly gives the impression something is disabled. It’s the opposite you want. In these circumstances, when there’s a collection of items, I find that it’s a nice effect to show the collection in colour to begin with, and when you hover over an item, the other items get slightly greyed out.

Two examples of hover styles on images

Related Stories