Im trying to create a header with different images and their deiscription. I want their description to be shown when we mouseOver the content using jQuery. I’m only posting my HTML and CSS as i think thats where the problem lies.
jQuery works but the problem is that even after using overflow hidden the div with class headerCont wraps around to next line. Can someone help me with this. Thanks.
Im not allowed to post images so this is the link to image that will help you in understanding me ->
http://image.bayimg.com/cabjpaaeg.jpg
http://img145.imageshack.us/img145/3236/cabjpaaeg.jpg
PS in the above image i’ve mouseOver one of the div with class headerCont. I want the TEXT to be placed next to the image. Also the last div wraps over to next line whenever one of the div is expanded (dont know the correct word to explain that!) instead of its original place
The HTML CODE:
<html>
<head>
<title>Silder</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="header">
<div style="margin: 5px; width:1300px; overflow: hidden;">
<div class="headerCont" style="background-color: #cdcdcd; ">
<div><img src="image/1.jpg" style="height: 317px; width: 214px; float:left; " /></div>
<div style="float:left;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #719501; ">
<div><img src="image/2.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #f3f3f3; ">
<div><img src="image/3.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #719501; ">
<div><img src="image/4.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:186px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #f3f3f3;">
<div><img src="image/5.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script type="text/javascript" src="js/home.js" ></script>
</body>
CSS CODE:
#content{
margin-left: auto;
margin-right: auto;
width: 90%;
border: 2px solid;
border-color: #272727;}
.outter{
border:2px solid #000000;
margin:4px;
position: relative;
}
.header{
width:1300px;
height:400px;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
margin-bottom:20px;
overflow:hidden;
position: relative;
}
.headerCont{
height: 100%;
width:214px;
padding:5px;
float:left;
overflow:hidden;
position:relative;
}
.header img{
border-color:#000000;
}
JavaScript:
$(".headerCont").mouseover(function(){
$(this).animate({
width:400,
}, 300 );
});
$(".headerCont").mouseout(function(){
$(this).animate({
width: 214,
}, 200 );
});
Finally i found out the solution. thanks everyone else. all i did was add another wrapper div after my header div. Here the code: