title: CSS Transition Left/Right Not Working
body: <p>I'll preface this with the fact that I'm no CSS expert, but I can't figure out why this isn't working. I want my DIV that contains the images to slide left and right when i hover over the left and right parts of the container. The sliding works fine, but the transition does not...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="event-pics-container"&gt;
       &lt;div class="slide slide-left"&gt;&lt;/div&gt;
       &lt;div class="slide slide-right"&gt;&lt;/div&gt;
       &lt;div class="event-pics-area" ng-show="eventImages.length"&gt;
           &lt;div ng-repeat="pic in eventImages"&gt;
               &lt;img src="{{pic.EncodedAbsUrl}}" alt="{{pic.Title}}" title="{{pic.Title}}" ng-click="siteProps.EventLogo = pic.EncodedAbsUrl"&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.event-pics-container{
     position:relative;height:100px;width:100%;background-color:black;overflow:hidden;
  }
  .event-pics-container .slide{
     position:absolute;top:0px;z-index:1000;height:100%;width:30px;background-color:rgba(255,255,255,0.5);
  }
  .event-pics-container .slide-left{
     left:0px;
  }
  .event-pics-container .slide-right{
     right:0px;
  }
  .event-pics-container .slide-left:hover + .event-pics-area{
     -webkit-transition: all 2s ease-in-out;
     -moz-transition: all 2s ease-in-out;
     -o-transition: all 2s ease-in-out;
     transition: all 2s ease-in-out;
     left:0px;
  }
  .event-pics-container .slide-right:hover + .event-pics-area{
     -webkit-transition: all 2s ease-in-out;
     -moz-transition: all 2s ease-in-out;
     -o-transition: all 2s ease-in-out;
     transition: all 2s ease-in-out;
     right:0px;
  }
  .event-pics-area{
     position:absolute;height:100px;white-space:nowrap;
  }
  .event-pics-area &gt; div{
  height:100px;width:100px;display:inline-block;overflow:hidden;position:relative;
  }
  .event-pics-area img{
     height:100%;cursor:pointer;
  }
  </code></pre>