When previewing an image in Firefox, hover over it to see the transparency grid behind it. Customizable grid size and color.
Image Preview Transparency Grid by BoffinBrain
Imported from a private source
Details
AuthorBoffinBrain
LicenseCC-BY-4.0
Categoryglobal
Created
Updated
Size1.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
When previewing an image in Firefox, hover over it to see the transparency grid behind it.
Customizable grid size and color (8 or 16 pixels, light or dark theme). Compatible with Stylus preprocessor.
Ported over from UserStyles.org
Version History
Version 2.0.1 - 2024-12-18
Added four options for different transparency grids, compatible with Stylus.
Version 1.1.1 - 2021-02-10
Updated with better only-child selector.
Version 1.0.0 - 2018-03-15
First upload (replaced an old style because you cannot delete old styles on userstyles.org)
Source code
/* ==UserStyle==
@name Image Preview Transparency Grid
@namespace github.com/openstyles/stylus
@version 2.0.1
@description When previewing an image in Firefox, hover over it to see the transparency grid behind it. Customizable grid size and color.
@author BoffinBrain
@preprocessor stylus
@var select pattern 'Grid Pattern' {
'Grid 8px Light*': '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX////X19cLyuRkAAAADklEQVR4XmP4AIX8EAgALgAD/W758msAAAAASUVORK5CYII="',
'Grid 8px Dark': '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEU9PT0YGBjFMQMwAAAADklEQVR4XmPgh8IPEAgAEeAD/bSogK0AAAAASUVORK5CYII="',
'Grid 16px Light': '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////X19cLyuRkAAAAD0lEQVR4XmP4z4Ad4ZAAAH6/D/HLugRxAAAAAElFTkSuQmCC"',
'Grid 16px Dark': '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU9PT0YGBjFMQMwAAAAD0lEQVR4XmNg+I8V4RIGAH6/D/EjO09fAAAAAElFTkSuQmCC"'
}
==/UserStyle== */
@-moz-document domain() {
/*
This is a global style. This empty block is here to comply with UserStyles.world restrictions:
https://userstyles.world/docs/faq#bad-style-format-error
*/
}
body > img:only-child {
background: none !important;
}
body > img:only-child:hover {
background: url(pattern) !important;
}