I’ve seen this used before to add a credit that only appears when you save the image. You append the credit to the bottom of the image, then crop the image with CSS using a technique like this to hide the credit. Then when somebody saves the image, they get the whole thing and the credit appears.
Somewhat related, but back in the old days (maybe better to say early days) we used a different technique although purely for fun.
Yes, you can clip an image, but you can also scale an image, making it half the size of the original. The fun-part is that Netscape Navigator would render all the even lines, and Internet Explorer rendered the uneven lines (or the other way around). Making the picture vendor-specific :-)
Since almost all the current browsers use the same render-engine (and if not probably the library) you can make you image bigger and hide some watermark in the non-rendered pixels.
You should, I think, at that point be seeing a square image of a jellyfish inside a red square. The square should be containing the image. When you hover, it should reveal the rest of the jellyfish (the image itself is rectangular, and wider than it is tall).
I'm using Firefox dev, it overflows for me. Are you sure you didn't hover the earlier screenshot of the unhovered image inside the red square, as opposed to the image inside a codepen embed?
Definitely using codepen. I can manipulate the scaling and view the html and css windows and stuff. I'm not using the latest firefox version, but it's not like this is a new feature right?
Okay, I've figured it out, thanks to the "test distros online" thingy to test version 145 and 148 as I previously mentioned.[0]
From Firefox 148 release notes for developers:[1]
> The overflow, overflow-x, and overflow-y CSS properties can now be used on replaced elements such as images, in the same way that they are used with other elements. Prior to this, replaced elements were always clipped to their bounding container. (Firefox bug 1999100).
Your own damn fault. Also it's against the HN rules to complain about "tangential annoyances" such as "my own bad behavior got me flagged and blacklisted and now it's your fault"
I'd like to hear what behavior you imagine I've done.
"This is a broken link" is not a "tangential annoyance" and is a valid reason for flagging. It's also appropriate to comment, so that the poster or moderator can fix the link.
Perhaps the bad behavior is failure to remove a compromised (botnet) device on your network that has been attacking one or more sites that use a popular security solution.
"Broken link" is not an accurate way to describe this situation.
- Censorship bypass tools triggering destination server's firewall (suspicious TLS fingerprint or connection characteristics, or bad proxy IP)
- Bad ISP (e.g. one ISP IP address or range of addresses shared by so many users that could create collateral damage if one or more user gone rogue)
- Actual botnet/hidden residential proxy exit node on the same IP/local network (e.g. TV boxes or SDKs embedded inside apps that users are not aware of)
- Strict privacy settings (unlikely to cause 403 straight away), or obscure browsers (also unlikely, but can trigger firewall because of connection fingerprint/characteristics)
Yes, you can clip an image, but you can also scale an image, making it half the size of the original. The fun-part is that Netscape Navigator would render all the even lines, and Internet Explorer rendered the uneven lines (or the other way around). Making the picture vendor-specific :-) Since almost all the current browsers use the same render-engine (and if not probably the library) you can make you image bigger and hide some watermark in the non-rendered pixels.
Is something supposed to happen when I hover my mouse over the image? Because nothing happens. I'm using Firefox.
(I'm also using FF, and it works for me.)
From Firefox 148 release notes for developers:[1]
> The overflow, overflow-x, and overflow-y CSS properties can now be used on replaced elements such as images, in the same way that they are used with other elements. Prior to this, replaced elements were always clipped to their bounding container. (Firefox bug 1999100).
[0]: https://news.ycombinator.com/item?id=49272986 [1]: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Rel...
https://news.ycombinator.com/item?id=49194630
"This is a broken link" is not a "tangential annoyance" and is a valid reason for flagging. It's also appropriate to comment, so that the poster or moderator can fix the link.
"Broken link" is not an accurate way to describe this situation.
- VPN/Proxy/Datacenter IP/Tor usage
- Censorship bypass tools triggering destination server's firewall (suspicious TLS fingerprint or connection characteristics, or bad proxy IP)
- Bad ISP (e.g. one ISP IP address or range of addresses shared by so many users that could create collateral damage if one or more user gone rogue)
- Actual botnet/hidden residential proxy exit node on the same IP/local network (e.g. TV boxes or SDKs embedded inside apps that users are not aware of)
- Strict privacy settings (unlikely to cause 403 straight away), or obscure browsers (also unlikely, but can trigger firewall because of connection fingerprint/characteristics)
- Actual bad behavior (scraping, etc)