<div class="container">
  <ul>
    <li class="a">Put on!</li>
    <li class="b">Put on!</li>
  </ul>
</div>
.container {
	background: url(http://hsmtweb.com/image/woods.jpg);
  width: 380px;
}

li {
    display : inline-block;
    background: rgba(255,255,255,); /*背景の透明度を最大に*/
    color: #FFF; 
    width: 300px;
    line-height: 66px;
    text-align: center;
  	font-size: 28px;
  	font-weight: bold;
  	border: 1px #FFF solid;
    margin: 20px 0 ;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.a:hover {
    background: rgba(255,255,255,0.3) ;
  /*背景の透明度が変わる*/
}

.b:hover {
      background: rgba(158,179,189,0.5) ; 
  /*色がついていてもきれいです*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.