Check out the demo
Here is the HTML code:
<div id="wrapper">
<div id="mainContainer" class="mcClass">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
<div id="Div1">
<p id="discalimer">Details*</p>
<p id="realDisclaimer" style="display:none">This is the real disclaimer</p>
</div>
</div>
</div>
The CSS for styling:
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#realDisclaimer{
color:white;
}
#Div1 {
top:142px;
left:76px;
width:50px;
height:30px;
position: absolute;
}
.unselectable, #Div1 p {
-webkit-user-select: none;
/* Chrome/Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:default;
}
.mcHoverState {
background-color:black;
}
.mcClass {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
}
#mainContainer {
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
Lastly, the JavaScript function:
$(document).ready(function () {
bannerAnimation();
$("#Div1").mouseenter(
function (evt) {
$("#text").hide();
$("#mainContainer").removeClass("mcClass").addClass("mcHoverState");
$("#discalimer").hide();
$("#realDisclaimer").show();
})
.mouseleave(
function (evt) {
$("#realDisclaimer").hide();
$("#text").show();
$("#discalimer").show();
$("#mainContainer").removeClass("mcHoverState").addClass("mcClass");
});
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}