Effet de survol CSS Bootstrap Thumbnail

Question

J'ai été mal à la tête à propos de la vignette Bootstrap ajouter en CSS hover effet. Actuellement, je l'ai eu correctement lors de la visualisation du bureau. Mais il ne plane toujours pas correctement lors de la visualisation dans les appareils mobiles. peut me donner gentiment une solution? vol stationnaire de l'échantillon i utilise est le lien ci-dessous http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

Mais je me rends compte que cet effet de vol stationnaire ne fonctionne pas dans les appareils mobiles. Veuillez fournir une solution plus efficace?

Voici le code pour HTML et CSS. S'il vous plaît veuillez jeter un oeil. Merci.

ci-dessous est 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> 

ci-dessous est CSS Hover Effet et CSS code Anime

/* 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

Je ne suis pas un professionnel, mais que je sache il n'y a pas une telle chose comme chose en vol stationnaire sur mobile ?

Le plus proche et peut-être la meilleure chose à mon avis est de faire un effet de survol pour la version de bureau et "onclick" effet pour la version mobile.

Je pointe à nouveau pour un vol stationnaire, vous devez avoir la souris pour survoler si vous avez l'idée?

Espérons que ça aide.