Pure CSS Modal Alert

My previous post was about CSS tooltips. Which after the fact I realized that MDN had a similar tutorial. In this post we will attempt something slightly more complicated – modal alerts.

jsfiddle example

Code

The idea is similar to that of the tooltip. Once you have the alert up use :hover on a full screen pseudo element to keep it there.

In this particular example we are showing an image in the alert.

The key here is to display content on the content hover and on the modal click.

But when we click the content we want to switch to display:none

Advanced Usecase

This next example is still a work in progress, but using these ideas combined with CSS transitions we can do some pretty cool stuff with just CSS.  The idea of this demo is an info button in the corner that has a cool animation when it appears and disappears.

The difficulties of this are dealing with transitions that mean leaving content on the screen that interact poorly with the :hover pseudo class.

I’m sure there are better animations that could be done e.g. something like the minimizing of an application in Windows or Apple. Also, I haven’t quite figured out how to do it with only two elements if anyone finds a clever workaround I’d be interested to know what it is.

Caveats

Again all the caveats from before apply. This is not touch screen friendly. Now it might be possible change using :focus, but that is dependent on if you want to add the complexity.

Another problem is  moving off the browser content will also cancel the alert.