css focus property not working properly - html

Question

I am using CSS transform and transition properties. When I hover the image, the button shows up as expected over the image. The problem I found now is that when I focus on the image by pressing the TAB key, the image simply disappears and only the button shows.
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;
}
How can I overcome this problem in a way that the same effect happens on FOCUS?