Two-Up Split image

css for split image

by danielzen

HTML

<p>Blah Blah</p>
<ul>
  <li>
  <div class="box">
    <div class="img" ng-class="selected">
        <img src="http://zzz.net/photo.jpg" alt="zen">
      <span>1</span>
      <ul>
        <li class="setting"><a title="Settings" href="javascript:void(0)">&nbsp;</a></li>
        <li class="remove">
          <a title="Remove" href="javascript:void(0)">&nbsp;</a>
        </li>
      </ul>
    </div>
<span class="twoup">      
    <div class="split left border">&nbsp;</div>
    <div class="split right border">&nbsp;</div>
</span> <!-- .twoup -->
  </div>
</li>
  <li>
  <div class="box">
    <div class="img" ng-class="selected">
        <img src="http://zzz.net/photo.jpg" alt="zen">
      <span>1</span>
      <ul>
        <li class="setting"><a title="Settings" href="javascript:void(0)">&nbsp;</a></li>
        <li class="remove">
          <a title="Remove" href="javascript:void(0)">&nbsp;</a>
        </li>
      </ul>
    </div>
<span class="twoup">      
    <div class="split left border">&nbsp;</div>
    <div class="split right border">&nbsp;</div>
</span> <!-- .twoup -->
  </div>
</li>    
</ul>

CSS

ul{ list-style:none; margin:0px; padding:0px;}                                                                                     
ul li { float:left; margin: 0 0 10px 0;}                                                                                           
ul li .img span { position: absolute; font-weight: bold; bottom: 2px; right:4px; z-index: 0; color: #f5f5f5;}                      
ul li.between  {position: relative; width: 4px; }                                                                                  
ul li.between div {height: 81px; width: 4x; margin: 0px auto; margin-top: 6px; padding: 0;}                                        
ul li.jqui-dnd-target-over div {background: #d0056b;}                                                                              
ul li .box h4{ font-weight:normal; font-size:12px; margin-left:4px;}                                                               
ul li .img{ border: solid 3px #FFF; position:relative;}                                                                            
ul li .img:hover, .rightSec.libraryImg ul li .selected, .drag .selected { border: solid 3px #de167d; background-color: #de167d;}   
ul li .img ul{ display:none; position:absolute; background-color:#de167d; top:0px; right:0px; padding:0px 0 0px;}                  
ul li .img:hover ul{ display:block;}                                                                                               
ul li .img ul li{ margin:0px 0 0 0px; float:left; background:url(http://cb1.zzz.net/app/images/icons2.png) 0 0 no-repeat; padding-left:2px;}           
ul li .img ul li a{ color:#FFF; display:block; height:19px; width:19px;}                                                           
ul li .img ul li a:hover{ text-decoration:none}                                                                                    
ul li .img ul li.setting{ background-position:0 -20px;}                                                                          ...