Beautiful Hover Effect with CSS3 & JQuery

Simple but cool stuff

by Meily Chhon

HTML

<div id="wrapper">
    <div id="header">
        <h1>Beautiful Hover Effect with CSS3 & JQuery</h1>
    </div>
    <div id="container">
        <div class="box">
            <a href="#" class="link-overlay" title="overlay-effect"></a>
            <div class="image-container">
                <a href="#" title="Creative Design"><img src="http://blogs.adobe.com/audition/files/2012/10/CreativeCloud_cropped_800x600.jpg?file=2012/10/CreativeCloud_cropped_800x600.jpg" title="Creative Image with CSS3 and Jquery" width="800" height="600"/></a>
            </div>
            <div class="caption">
                <h3 class="date">18 April</h3>
                <h2 class="post-title"><a href="#" title="creative block">Creative Post</a></h2>
                <h4 class="description">This is a very creative artwork done by Adobe</h4>
            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {
    font-family: 'Roboto Condensed', sans-serif;
    background: rgba(230, 126, 34,1.0);
}

img {
    width: 100%;
    height: auto;
}

#wrapper {
    width: 100%;
}

#header {
    width: 100%;
    text-align: center;
}

h1 {
    color: rgba(236, 240, 241,1.0);
    font-size: 1.59em;
    font-weight: 300;
}

#container {
    width: 100%;
    height: auto;
}

.box {
    float: left;
    height: 50%;
    margin-left: 20px;
    width: 100%;
}

.link-overlay {
    width: 100%;
  height: auto;
  background: #e74c3c;
  opacity: 0.5;
  display: block;
  z-index: 100;
  position: absolute;
  padding: 0 0 75% 0;
  top: 64px;
}

.image-container {
    width: 100%; 
    height: 50%;
}

.caption {
    position: relative;
    top: -150px;
}