Pods1

Pods that highlight when you mouse over them.

by burhans

HTML

<h2>No Shadows and Not Rounded in IE</h2>
<div class="pod">
    <div class="title">
        First pod title
    </div>
    <div class="contents">
        First pod contents
    </div>
</div>
<div class="pod">
    <div class="title">
        Second Pod tytle
    </div>
    <div class="contents">
        Second pod contents.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
        Lorem ipsum dolor.
    </div>
</div>

CSS

div.pod
{
    background-color: Cornsilk;
    border-color: Grey;
    border-collapse: collapse;
    border-style: solid;
    border-radius: 5px 0px 10px 15px;
    border-width: 1px;
    float: left;
    margin: 5px;
    width: 200px;
    -moz-border-radius: 5px 0px 10px 15px;
    -webkit-border-radius: 5px 0px 10px 15px;
}

div.pod:hover
{
    background-color: Yellow;
    border-color: Blue;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}

div.pod div.contents
{
    padding: 3px;
}

div.pod div.title
{
    background-color: AliceBlue;
    border-bottom-color: inherit;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-left-radius: 5px;
    padding: 3px 3px 0px 3px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
}