Email Client
- Outlook.com webmail (dark mode only)
Operating System
- Webmail
- Operating systems: Windows, macOS
Expected Result
Images should not have any background color applied on hover, maintaining their transparent or original state.
Actual Result
Outlook.com's preprocessing automatically adds the class WjXVs to all <img> tags. This class is then targeted with the following CSS:
.WjXVs:hover {
background-color: var(--neutralDark);
transition: background-color 1s;
}
The --neutralDark variable resolves to white #FFFFFF, creating a visible white background behind images on hover in dark mode.
This affects:
- Images inside links (
<a><img></a>)
- Standalone images (not wrapped in links)
Steps to reproduce
- Create an HTML email with one or more
<img> tags (with or without wrapping <a> tags)
- Send the email to an Outlook.com email address
- Enable dark mode in Outlook.com webmail settings
- Open the email in the webmail interface
- Hover over any image
- Observe a white background appearing behind the image with a 1-second transition
Additional context
Probable reasoning behind this behavior:
This appears to be an accessibility measure by Outlook.com to ensure that PNG images with dark tones remain visible in dark mode (when the background switches from white to dark). However, this implementation has several accessibility issues:
- It uses
:hover instead of :focus, which doesn't help keyboard navigation users
- It creates the opposite problem: images with light/white tones on transparent backgrounds (e.g., white logos) become invisible on hover
Solution:
Add the following CSS rule in the <style> tag of the email to override Outlook.com's default hover behavior:
[data-ogsc] img:hover {
background-color: transparent !important;
}
This targets Outlook.com specifically (via the data-ogsc attribute) and forces images to maintain a transparent background on hover, preventing the unwanted white background from appearing in dark mode.
Email Client
Operating System
Expected Result
Images should not have any background color applied on hover, maintaining their transparent or original state.
Actual Result
Outlook.com's preprocessing automatically adds the class
WjXVsto all<img>tags. This class is then targeted with the following CSS:The
--neutralDarkvariable resolves to white#FFFFFF, creating a visible white background behind images on hover in dark mode.This affects:
<a><img></a>)Steps to reproduce
<img>tags (with or without wrapping<a>tags)Additional context
Probable reasoning behind this behavior:
This appears to be an accessibility measure by Outlook.com to ensure that PNG images with dark tones remain visible in dark mode (when the background switches from white to dark). However, this implementation has several accessibility issues:
:hoverinstead of:focus, which doesn't help keyboard navigation usersSolution:
Add the following CSS rule in the
<style>tag of the email to override Outlook.com's default hover behavior:This targets Outlook.com specifically (via the
data-ogscattribute) and forces images to maintain a transparent background on hover, preventing the unwanted white background from appearing in dark mode.