Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to show list on hover

    I have boxes with background images and text over it wrapped in divs :

    Code:
    <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 :
    Code:
    #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?
    Last edited by bluepills; 06-13-2012 at 08:09 PM. Reason: adding a link


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •