CSS hover effect Bootstrap Thumbnail

Question

Я был головной болью о Bootstrap thumbnail добавьте эффект наведения CSS. В настоящее время я получил его правильно, пока смотрю с рабочего стола. Но он все еще не корректно наводится на просмотр в мобильных устройствах. может любезно дать мне какое-то решение? образец парить я использую по ссылке ниже http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

Но я просто понимаю, что этот эффект парения не работает в мобильных устройствах. Просьба предоставить любое эффективное решение?

Ниже приведен код для HTML и CSS. Пожалуйста, любезно посмотрите. Благодарю.

ниже HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 thumbnail view view-first"> 
     <img src="img/apple.jpg" alt="apple"> 
     <div class="mask"> 
      <p>.col-md-4</p> 
     </div> 
      <h4>.col-md-4</h4> 
    </div> 
    </div> 
</div> 

ниже CSS Hover эффект и CSS код Аниме

/* Overwrite custom bootstrap thumbnail */ 
.thumbnail { 
border-top-left-radius: 40px !important; 
border-top-right-radius: 0px !important; 
border-bottom-left-radius: 0px !important; 
border-bottom-right-radius: 40px !important; 
background-color: transparent !important; 
border: 0px !important; 
} 

.thumbnail > img, 
.thumbnail a > img { 
border-top-left-radius: 40px !important; 
border-top-right-radius: 0px !important; 
border-bottom-left-radius: 0px !important; 
border-bottom-right-radius: 40px !important; 
margin-bottom: 15px; 
} 

/* hover effect*/ 
.view { 
overflow: hidden; 
position: relative; 
text-align: center; 
} 
@media { 
.view .mask,.view .content { 
width: 312px; 
height: 234px; 
position: absolute; 
overflow: hidden; 
top: 0; 
margin-top: 4px; 
border-top-left-radius: 38px; 
border-bottom-right-radius: 38px; 
} 
} 
/* Media Queries */ 
@media screen and (min-width:320px) and (max-width:540px) { 
.view .mask,.view .content { 
    margin-top: 44px; 
    width: 152px; 
    height: 114px; 
    border-top-left-radius: 38px; 
    border-bottom-right-radius: 38px; 
} 
} 
.view img { 
display: block; 
position: relative; 
} 

/* Hover Effect anime */ 
.view-first img { 
-webkit-transition: all 0.2s linear; 
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear; 
-ms-transition: all 0.2s linear; 
transition: all 0.2s linear; 
} 
.view-first .mask { 
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
opacity: 0; 
background-color: rgba(124,81,161, 0.7); 
-webkit-transition: all 0.4s ease-in-out; 
-moz-transition: all 0.4s ease-in-out; 
-o-transition: all 0.4s ease-in-out; 
-ms-transition: all 0.4s ease-in-out; 
transition: all 0.4s ease-in-out; 
} 
.view-first:hover .mask { 
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
filter: alpha(opacity=100); 
opacity: 1; 
} 

Answer 1

Я не профессионал, но, как я знаю нет такого понятия, как парения вещь на мобильный ?

Ближайшая и, возможно, лучшая вещь, на мой взгляд, - создать эффект зависания для настольной версии и эффекта «onclick» для мобильной версии.

Я снова указываю, что вы наведите курсор мыши, чтобы навести на него курсор, если у вас есть идея?

Надеюсь, это поможет.