PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
CSS3 interactive overlays on rollover
In this tutorial, you will learn to create rollover interactive overlays.
We have created these interactive overlays with stretchable border and overlay information within translucent, linear fill, rounder corner background. So are you all set for this highly informative tutorial.

Final output is shown below.
Please rollover over the girl's faces to know more about them
  • I am Clare,
    and I love dancing.
  • I am Ann,
    and am... hair stylist.
  • I am Grace,
    and am from NY.

Styles used to create this overlay effect

#overlay_div-person
{
position:relative;
width:425px;
height:300px;
left: 11px;
}

#overlay_div-face
{
width:100px;
height:150px;
color:#fff;
z-index:100;
position:absolute;
}

#overlay_div-face ul li
{
list-style:none;
width:100px;
height:100px;
z-index:100;
cursor:pointer;
}

#overlay_div-face ul li overlay_face
{
display:none;
}

#overlay_div-face ul li:hover overlay_face
{
border: 7px solid #ffffff;
-webkit-border-image: url(overlay_border.png) 7 7 7 7 stretch;
-moz-border-image: url(overlay_border.png) 7 7 7 7 stretch;
width:80px;
height:80px;
z-index:100;
display:block;
}

#overlay_div-face ul li cap
{
display:none;
}

#overlay_div-face ul li:hover cap
{
border: 1px solid #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
background-image: -moz-linear-gradient(top, #333333, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333, endColorstr=#000000);
width: 100%;
height: 30px;
opacity:0.8;
display:block;
float:left;
top:137px;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}


And the HTML code
<div id="overlay_div-person" >

<div id="overlay_div-face" style="left: 100px; top: 3px">
<ul>
<li><overlay_face> </overlay_face> <cap>I am Clare,
and I love dancing.</cap></li >
</ul>
</div>

<div id="overlay_div-face" style="left: -25px; top: 42px">
<ul>
<li> <overlay_face> </overlay_face> <cap>I am Ann,
and am... hair stylist. </cap></li>
</ul>
</div>

<div id="overlay_div-face" style="left: 250px; top: 100px">
<ul>
<li> <overlay_face> </overlay_face> <cap>I am Grace,
and am from NY.</cap></li>
</ul>
</div>

<img src="backimage.jpg" />
</div>

OK now please do not panic, the styles used for this might look like there is a lot to learn, but the fact is, this is quite simple.
In simple words, what we are trying to do here is,
  1. Position a 'div' placeholder right above the face.
  2. Insert a <ul> listing tag, with a single <li> tag carrying <overlay> tag for white border around the face and <cap> tag for caption below this white border.
    <div id="overlay_div-face" style="left: 100px; top: 3px">
    <ul>
    <li><overlay_face> </overlay_face> <cap> </cap> I am Clare,
    and I love dancing.</li >
    </ul>
    </div>

  3. Basic theory here is, both these 'overlay' and 'cap' style will carry 'display:none' in normal situation and displays that white border and caption respectively when <li> tag is rolled over.

    #overlay_div-face
    {
    width:100px;
    height:150px;
    color:#fff;
    z-index:100;
    position:absolute;
    }

    #overlay_div-face ul li
    {
    list-style:none;
    width:100px;
    height:100px;
    z-index:100;
    cursor:pointer;
    }

    #overlay_div-face ul li overlay_face
    {
    display:none;
    }

    #overlay_div-face ul li:hover overlay_face
    {
    border: 7px solid #ffffff;
    -webkit-border-image: url(overlay_border.png) 7 7 7 7 stretch;
    -moz-border-image: url(overlay_border.png) 7 7 7 7 stretch;
    width:80px;
    height:80px;
    z-index:100;
    display:block;
    }

    #overlay_div-face ul li cap
    {
    display:none;
    }

    #overlay_div-face ul li:hover cap
    {
    border: 1px solid #333333;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
    background-image: -moz-linear-gradient(top, #333333, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333, endColorstr=#000000);
    width: 100%;
    height: 30px;
    opacity:0.8;
    display:block;
    float:left;
    top:137px;
    padding:5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    }

If you are new to advanced CSS and if you didn't understand stretched border concept and rounded corner, linear fill translucent background CSS explanation for the same is provided below.

Stretched border concept and style used for the same-

I used the above displayed image transparent background png file of dimension 21px * 21px for frame around face.

Style explanation


Click on the links below to view its respective tutorial -

Tags: CSS3 overlay, CSS3 for Stretchable border styles, rounded corner, CSS3 for opacity background, CSS3 for gradient background

 

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.