<div id="mainContainer">
  
<div id="slide-container" class="slide-wrapper">
   <div id="ul-container" class="ul-wrapper">
     
  <div class="accordion">
    
    <ul>
      
      <li id="button1">
        <div class="tag">
          <p> <img src="http://ulcommdev.com/continuum/assets/images/circle.png"></p>
          
        </div>
					<div class="paragraph button1back">
        <h1>Crude Oil Logistics</h1>
						<p>Getting energy where you need it. Quickly and dependably.
</p><p>&nbsp;</p><p><img src="http://ulcommdev.com/continuum/assets/images/learn-more-btn.png"></p>
              </div>
      </li>
      
      <li id="button2">
        <div class="tag">
          <p> <img src="http://ulcommdev.com/continuum/assets/images/circle.png"></p>
          
        </div>
        <div class="paragraph button2back">
        <h1>Moving Energy<br>Forward</h1>
						<p>Continuum Energy experts have the<br>deep industry knowledge to keep<br>resources flowing to the one<br>point that matters most: you.</p>
              <p>&nbsp;</p><p><img src="http://ulcommdev.com/continuum/assets/images/learn-more-btn.png"></p>
              </div>
      </li>
              
       <li id="button3">
        <div class="tag">
          <p> <img src="http://ulcommdev.com/continuum/assets/images/circle.png"></p>
        </div>
        <div class="paragraph button3back">
        <h1>Producer Services</h1>
						<p>We bring complete solutions to help our<br> producers get more.
              </p><p>&nbsp;</p><p><img src="http://ulcommdev.com/continuum/assets/images/learn-more-btn.png"></p>
              </div>
      </li>
              
              
        <li id="button4">
        <div class="tag">
          <p> <img src="http://ulcommdev.com/continuum/assets/images/circle.png"></p>
        </div>
        <div class="paragraph button4back">
        <h1>Midstream Services</h1>
						<p>Transforming raw products into the<br>resources the market needs.</p>
              <p>&nbsp;</p>
              <p><img src="http://ulcommdev.com/continuum/assets/images/learn-more-btn.png"></p>
              </div>
      </li>
      
    </ul>
    
  </div>
  
          <div class="clearfloat"></div>
     

          </div>
          </div>
          </div>
@import "compass/css3";

@import "compass/reset";
@import "compass/css3";

body {
	background-color: #fff;
	font-family: Lato, sans-serif;
}

#mainContainer{
  width:100%;
  position:relative;
}

#slide-container{
  display:block;
  height:400px;
}

.slide-wrapper{
  margin:0 auto;
  width:100%;
  @include background-image(linear-gradient(#b3e1e4, #4298b9));
}

#ul-container{
  display:block;
  height:auto;
  position:relative;
}
.ul-wrapper{
  margin:0 auto;
  width:1280px;
}

.accordion {
  /*@include background-image(linear-gradient(#b3e1e4, #4298b9));*/
	position: absolute;
	width: 100%;
	height: 450px;
	margin-top: 0;
	left: 0;
	top: -50px;
	overflow: hidden;
  /*background: url(http://ulcommdev.com/continuum/assets/images/accordion-back.png);*/
}

ul {
		margin-left: 150px;
		list-style-type: none;
  
	}

li {
    top:0;
		overflow: hidden;
		position: relative;
		width: 85px;
		height: 500px;
		float: left;
		display: block;
    transform: rotate(25deg);
  margin-right:1px;
  	/*@include transition( all 0.4s 0.1s ease-out );*/
  
  /*@include transition-property(width);*/
  @include transition-duration(0.4s);
  /*@include transition-timing-function(ease-in);*/

  
  &:hover {
			width: 860px;
    overflow:visible;
    top:164px;
    left:-36px;
  }
  
}



li#button1:hover{
background-color:#000000;
}

.button1back{
  background: url(http://ulcommdev.com/continuum/assets/images/cont-slide10.jpg);
}


li#button2:hover{
background-color:#ececee;
}

.button2back{
  background: url(http://ulcommdev.com/continuum/assets/images/cont-slide9.jpg);
}

li#button3:hover{
background-color:#bbc8d8;
}

.button3back{
  background: url(http://ulcommdev.com/continuum/assets/images/cont-slide8.jpg);
}


li#button4:hover{
background-color:#d0ebfd;
}

.button4back{
  background: url(http://ulcommdev.com/continuum/assets/images/cont-slide7.jpg);
}

h1 {
			font-size: 2.5em;
			margin-bottom: 10px;
      color:#fff;
		} 

		p {
			font-size: 0.88em;
			line-height: 1.5em;
			padding-right: 30px;
      color:#fff;
		}

.tag{
  z-index:10;
  position:absolute;
  width:80px;
  height:500px;
  @include background-image(linear-gradient(#b3e1e4, #4298b9));
  top:0;
  left:0;
}

.tag:hover{
  @include background-image(linear-gradient(#ffd49e, #ff4f45));
  top:0;
  left:0;
} 

.tag p {
  position:absolute;
  top:40%;  
  transform: rotate(-25deg);
  left:20%;
}

.paragraph {
    z-index:9;
		position: absolute;
		width: 860px;
		height: 500px;
		margin: -234px 0 0 114px;
		padding: 150px 0 0 80px;
    transform: rotate(-25deg);
  background-color:#246588;
} 


.clearfloat{clear:both;}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.