css焦点属性无法正常工作

Question

我正在使用CSS转换和转换属性。当我将鼠标悬停在图像上时，按钮会按预期显示在图像上。我现在发现的问题是，当我通过按TAB键关注图像时，图像会消失，只有按钮显示。

HTML：

<div class="main">
  <img src="phone.jpg" >
  <div class="paragraph">This wil be centered</div>
  <div class="content">
     <button>Nokia 7210 Classic</button>
  </div>
</div>   

CSS：

.clearfix{
  clear: both;
}section
{
  text-align: center;
}
.main{
  float:left;
  width:30%;
  text-align: center;
  border:10px solid white;
  width:306px;
  height:306px;
  margin : 50px auto;
  box-shadow: 0px 0px 25px black;
  overflow: hidden;
}
.paragraph{
 -webkit-transform: translateY(-300%);
 border: 5px solid grey;
 background-color: grey;
 opacity: 0.5;
}
.main:hover .content,
.main:focus .content{
  -webkit-transform: translateY(-340px);
  -webkit-transition: -webkit-transform 700ms;
}
.content{
  width: 306px;
  height: 306px;
  background: rgba(51, 102, 255, 0.5);    
}
img{
  height:inherit;
  width:inherit;
 -webkit-transition: -webkit-transform 5000ms;
}
button{
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: black;
  border: 0;
  cursor: pointer;
  color: white;
  font: 16px tahoma;  
}
button:hover{
 opacity: 0.5;
}

如何以在FOCUS上发生相同效果的方式克服此问题？