...

View Full Version : How to show list on hover



bluepills
06-13-2012, 09:07 PM
I have boxes with background images and text over it wrapped in divs :



<div id="whatwedo" style="display:none">
<div class="wrap">
<div class="whiteBox">
<div id="motionbox">
<div class="captionwwd"> <a href="#/motion">
<ul>
<li>Animation</li>
<li>Digital Signage</li>
<li>3d products</li>
</ul>
</a> </div>
</div>
<div id="photographybox">
<div class="captionwwd"> <a href="#/photography">
<ul>
<li>Products</li>
<li>Events</li>
<li>Fashion</li>
</ul>
</a> </div>
</div>
<div id="videobox">
<div class="captionwwd"> <a href="#/video">
<ul>
<li>Web commercials</li>
<li>Corporate videos</li>
<li>Events</li>
<li>Executive production</li>
</ul>
</a> </div>
</div>
</div>
</div>
</div>


Here's my CSS :


#motionbox {
position: absolute;
top: 0;
width: 340px;
height: 225px;
left: 0px;
background-image: url(../images/whatwedo/motion.png);
background-repeat: no-repeat;
}
#photographybox {
position: absolute;
top: 0;
width: 340px;
height: 225px;
left: 340px;
background-image: url(../images/whatwedo/photo.png);
background-repeat: no-repeat;
}
#videobox {
position: absolute;
top: 0;
width: 340px;
height: 225px;
left: 680px;
background-image: url(../images/whatwedo/video.png);
background-repeat: no-repeat;
}

.boxgridwwd {
width: 299px;
height: 180px;
float: left;
overflow: hidden;
position: relative;
padding: 20px;
}
.whatwedo {
top:0px;
}
.captionwwd {
padding-top: 30px;
padding-left: 20px;
width: 180px;
color:#fff;
font-size:12px;
}
#whatwedo a {
color:#fff;
font-size:12px;
}
.captionwwd ul {
list-style: none;
padding: 0 0 0 20px;
}
.captionwwd li {
list-style:none;
padding-left: 1.4em;
text-indent: -.7em;
}

I wanted to be able to rollover the boxes in order to make the text appear OVER my image (which is a background image).. I tried adding the same image on top and hiding it on hover but it's not working..

Here's the link to the preview page of my site :
http://thepurplefactor.com/orange/en/#/whatwedo

Any ideas how I can achieve this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum