Html 移动浏览器上的焦点状态是否恢复正常？

我正在使用.css为我的艺术创建一个公文包网页。我使用浮动框布局来分别显示带有.focus标记的每件艺术品，因此当单击图像时，它会展开，再次单击以使其恢复正常。我遇到的问题是，该网站在台式机上运行良好，但在移动设备（iPad）上运行不好。在iPad（使用safari）的情况下，.focus将用于展开图像，但我无法将图像恢复到原始状态。在我的桌面上使用safari，图像将恢复到正常状态，但我必须单击远离图像才能恢复正常状态

如果可能的话，我想保留这个site.css/html

这是相关样式表中的.css代码

  vert1{
    display:inline-block;
    width:150px;
    height:200px;
    position:relative;
    }
  vert1 img{
    width:auto%; 
    height:100%;
    position:absolute;
    z-index:1;
    -webkit-transition: all 0s ease;  
    -moz-transition: all 0s ease;  
    -o-transition: all 0s ease;  
    -ms-transition: all 0s ease;  
    transition: all 0s ease;  
    }
  vert1:focus{
    }
  vert1:focus img{
    width: auto;
    height: 80%;
    position: fixed;
    left: 20%;
    top: 10%;
    z-index: 25;
    -webkit-transition: all 0s ease;  
    -moz-transition: all 0s ease;  
    -o-transition: all 0s ease;  
    -ms-transition: all 0s ease;  
    transition: all 0s ease;  
    }

这是它在html中的实现

  <div class="img">
    <vert1 tabindex="1"><img src="7woman.jpg"></vert1><br />
    title/medium/size
  </div>

头衔/中等/尺码

这里是该网站的链接

以及指向上述代码的链接

谢谢大家!