Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | No Comments

In a previous post I demonstrated a CSS Only Image Zoom. In this post I will explain how to do a CSS only overlay using the CSS3 box-shadow effect to focus the users’ attention onto the element being hovered on.

Live Demo

Here is the HTML Markup;
[html]



Hover over me



[/html]

And here is the CSS:

[css]
div
{
position:absolute;
top:25%;
left:40%;
width:20%;
height:20%;
background-color:#ff0000;
border:1px solid #000000;
text-align:center;
line-height:8em;
}
div:hover
{
-webkit-box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
-o-box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
-moz-box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
}
[/css]

This is a very, VERY simple demonstration. We have a red div, that when hovered, puts a grey overlay over the rest of the screen. So, how can we use this in a real website? If we go back to my post on the image zoom again, this same technique has been used on the large images:

[css]
/* When the user hovers of the link,
show the bigImage and put an overlay over everything else */
ul li a:hover img.bigImage
{
-webkit-box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
-o-box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
-moz-box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
box-shadow:0 0 0 1000em rgba(0,0,0,0.2);
visibility:visible;
}
[/css]

Live Example

And no, this does not work in less than IE9. Still a cool effect, though.

Category: CSS, HTML

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • SUBSCRIBE TO OUR FEED