IOS Safari и Chrome CSS3 загрузчик изображение при наведении

Question

Я использую этот код CSS для создания наведения на изображения в начальной загрузке, но это наведение не работает в браузере IOS Safari и Chrome. это работает на Android . я хочу знать, где я неправ и что мне делать?

    .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

Вам нужно использовать селектор:focus для iOS. Просто добавьте его в свои классы так же, как и селектор:hover.