CodePen

HTML

            
              <ul>
  <li>Aloe</li>
  <li>Feverfew</li>
  <li>Kava kava</li>
  <li>Bergamot</li>
  <li>Ginger</li>
  <li>Lavendar</li>
  <li>Calendula</li>
  <li>Hops</li>
  <li>Marjoram</li>
</ul>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *{
  @include box-sizing(border-box);
  font-family: 'helvetica neue'
    , 'helvetica', 'pt sans', 'arial', sans-serif;
  font-weight: 500;
  color: #121212;
}

@mixin transparency($opacity){
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=$opacity*100);
	-moz-opacity:$opacity;
	-khtml-opacity: $opacity;
  opacity: $opacity;
}



ul{
  border: 3px solid #121212;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: #FFFFFF url('http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg') no-repeat center center;
  background-size: cover;
  
  &:after{
    content: '';
    width: 100%;
    display: table;
    clear: both;
  }
    
  &:hover li{
    @include transparency(.5);
    background: #FFFFFF;
  }
    
  &:hover li:hover{
    @include transparency(1);
    background: transparent;
    color: #FFFFFF;
  }
  
  li{
    width: 100%;
    float: left;
    display: block;
    margin: 0;
    padding: 10px;
    text-align: center;
    @include transition(.2s ease-in-out);
  }
}

@media (min-width: 400px){
  ul li{
    width: 33.33%;
}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................