Hey Community,

I recently built a before/after slider for an email and I had to share it with everyone! You can check out the codepen here or check out the scope

The code's still pretty messy and could use some clean-up so some things might seem repetitive/unneccessary. Within the email there are two before/after sliders, one for desktop and one for mobile. Because I could use CSS3 transitions I re-made it for mobile to give it that smooth scroll instead of the snapping you see on desktop. The slider functions using a nested table with two <td>'s. The first <td> has a background image which is the before image. The parent table has a background image of the after image. To be able to have a slider that can go back and forth you can only assign width="50%" to the second <td>. If you assign a width to the first <td> the second <td> will be unable to overwrite the first <td>'s width.

Using [lang~="after"]:hover {width:100%} and [lang~="before"]:hover{width:100%} (thank you fresh inbox!) we can change the widths of the two <td>'s which will reveal the background image creating that before/after effect.

It currently works in the following:

  • Gmail
  • Outlook.com
  • Yahoo Mail
  • iOS
  • Android Native

I have a pretty limited library of devices so if you find something it doesn't work on let me know in the comments.

I plan on doing a more in-depth write-up when I find time but I couldn't wait that long to post the final result!