IOS safariとchrome css3ブートストラップのホバー画像

Question

私はこのCSSコードを使用してブートストラップに画像をホバーしますが、このホバーはIOS SafariとChromeブラウザでは機能しません。それはアンドロイドに取り組んでいます。私はどこが間違っているのか知りたいのですが、どうしたらいいですか？

.hovereffect { 
     width:100%; 
     height:100%; 
     float:left; 
     overflow:hidden; 
     position:relative; 
     text-align:center; 
     cursor:default; 
    } 

    .hovereffect .overlay { 
     width:100%; 
     height:100%; 
     position:absolute; 
     overflow:hidden; 
     top:0; 
     left:0; 
     opacity:0;  
     background-color:rgba(130,139,164,0.5); 
     -webkit-transition:all .4s ease-in-out; 
     -moz-transition: all .4s ease-in-out; 
     -o-transition:all .4s ease-in-out; 
     transition:all .4s ease-in-out; 
    } 

    .hovereffect img { 
     display:block; 
     position:relative; 
     -webkit-transition:all .4s linear; 
     transition:all .4s linear; 
     -moz-transition:all .4s linear; 
     -o-transition:all .4s linear; 
    } 

    .hovereffect h2 { 
     color:#fff; 
     text-align:center; 
     position:relative; 
     font-size:17px; 
     background:rgba(41,35,92,0.8); 
     -webkit-transform:translateY(-100px); 
     -ms-transform:translateY(-100px); 
     -moz-transform: translateY(-100px); 
     -o-transform: translateY(-100px); 
     transform:translateY(-100px); 
     -webkit-transition:all .2s ease-in-out; 
     -moz-transition: all .2s ease-in-out; 
     -o-transition:all .2s ease-in-out; 
     transition:all .2s ease-in-out; 
     padding:10px; 
    } 
    .hovertext { 
     color:#fff; 
     text-align:center; 
     position:relative; 
     font-size:17px; 
     padding:10px; 
    } 

    .hovereffect a.info { 
     text-decoration:none; 
     display:inline-block; 
     color:#fff; 
     border:1px solid #fff; 
     background-color:transparent; 
     opacity:0; 
     filter:alpha(opacity=0); 
     -webkit-transition:all .2s ease-in-out; 
     -moz-transition:all .2s ease-in-out; 
     -o-transition:all .2s ease-in-out; 
     transition:all .2s ease-in-out; 
     padding:7px 14px; 
    } 

    .hovereffect a.info:hover { 
     box-shadow:0 0 5px #fff; 
    } 

    .hovereffect:hover img { 
     -ms-transform:scale(1.2); 
     -webkit-transform:scale(1.2); 
     -moz-transform: scale(1.2); 
     -o-transform: scale(1.2); 
     transform:scale(1.2); 
     border-radius: 15px; 
    } 

    .hovereffect:hover .overlay { 
     opacity:1; 
     filter:alpha(opacity=100); 
     cursor: pointer; 
     visibility: visible; 
    } 

    .hovereffect:hover h2,.hovereffect:hover a.info { 
     opacity:1; 
     filter:alpha(opacity=100); 
     -ms-transform:translateY(0); 
     -webkit-transform:translateY(0); 
     -moz-transform: scale(1.2); 
     -o-transform: scale(1.2); 
     transform:translateY(0); 
    } 

    .hovereffect:hover a.info { 
     -webkit-transition-delay:.2s; 
     -moz-transition-delay: .2s; 
     -o-transition-delay: .2s; 
     transition-delay:.2s; 
    } 

    #rounded { 
     -webkit-border-radius: 25px; 
     -moz-border-radius: 25px; 
     border-radius: 25px; 
    } 
    .rounded { 
     -webkit-border-radius: 25px; 
     -moz-border-radius: 25px; 
     border-radius: 25px; 
    } 

Answer 1

iOSでは：フォーカスセレクタを使用する必要があります。ホバーセレクタと同じ方法でクラスに追加するだけです。