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に起こるような方法でこの問題を克服することができますか？

Answer 1

私は、異なるブラウザ間で予期しない動作を扱うとき、私は同様の問題があった

active, change, and event 

利用することになります。