|
|
|
|
|
|
by chrismorgan
1837 days ago
|
|
|
Certainly neither technique for covering an image that I showed in another comment is a hack. They’re both logical, coherent and fairly obvious ways of doing it. Getting hover effects to render on top, well, I wouldn’t consider that a hack either, though it’s a little more subjective (“why does position:relative make it work?”). I say that of course those effects aren’t going to render on top by default, because rendering is done in order unless you fiddle with layers and z-indexes, so shunting the hovered element onto a new layer or increasing its z-index above its surrounds is the obvious thing and the only way it could work. I know many things that are hacks and that I will acknowledge are hacks, but these two aren’t hacks at all. They’re straightforward and natural CSS, working in exactly the way it was designed (and in areas where that design is completely sensible). |
|
|
The absolute "obvious ways":
- a wrapper div that has to be position: relative. And a display block/inline-block because otherwise it won't work. An svg and an image inside that div. The svg has to be position: absolute.
- a full-blown grid. Two elements must be forced to occupy the same cell in the grid
Ah yes. Absolutely logical and coherent and not hacks at all.
> Getting hover effects to render on top, well, I wouldn’t consider that a hack either, though it’s a little more subjective
"Not a hack": rendering is done in order, but you still have to "shunt the hovered element onto a new layer or increasing its z-index above".
And this still doesn't precisely solve the problem of "outlining a hovered element so that outline/shadow covers other items around". Because most likely you'll have layers on top of layers of "logical coherent" wrapper divs to make everything work together, and you have to spend some time figuring out how to make that particular problem actually work.
And god forbid you want to make it pretty: https://tobiasahlin.com/blog/how-to-animate-box-shadow/