Page is a not externally linkable
Paul_o_b - 10:03 am on Sep 23, 2011 (gmt 0)
Hi,
It all depends on your structure but I;m huessing you are looking for something like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
width:450px;
margin:0 auto;
background:#fcf;
border:1px solid #000;
position:relative;
padding:0;
list-style:none;
}
.wrap li {
width:100%;
clear:both;
overflow:hidden;
position:relative;
border-bottom:5px solid #000;
}
.wrap .img {
margin:10px;
width:200px;
height:200px;
background:red;
border:1px solid #000;
text-align:center;
}
.over {
position:absolute;
top:10px;
left:-999em;
width:200px;
height:200px;
background:yellow;
border:1px solid red;
text-align:center;
z-index:2;
}
.inner:hover .over { left:10px; }
.wrap p {
padding:10px;
margin:0 10px 1em;
}
.caption {
background:#fff;
border:1px solid #000;
float:left;
clear:left;
}
.caption:hover{background:#eee}
</style>
</head>
<body>
<ul class="wrap">
<li>
<div class="img">This would be your main image</div>
<div class="inner">
<p class="caption">This would be the Caption that changes the image when you rollover it.</p>
<div class="over">This would be the rollover image</div>
</div>
</li>
<li>
<div class="img">This would be your main image</div>
<div class="inner">
<p class="caption">This would be the Caption.</p>
<div class="over">This would be the rollover image</div>
</div>
</li><li>
<div class="img">This would be your main image</div>
<div class="inner">
<p class="caption">Caption</p>
<div class="over">This would be the rollover image</div>
</div>
</li>
</ul>
</body>
</html>
It does rely on a certain structure to work but seems to do what you asked.