CSS hover effect Bootstrap Thumbnail - css

Question

I been headache about the Bootstrap thumbnail add in CSS hover effect.
Currently I got it correctly while view from desktop. But it still not hover correctly while view in mobile devices. can kindly give me some solution?
the sample hover i use is from the link below
http://tympanus.net/Tutorials/OriginalHoverEffects/index.html
But i just realize that this hover effect is not working in mobile devices.
Kindly provide any solution that is more effective?
Below is the code for HTML and CSS. Please kindly have a look. Thanks.
below is 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>
below is CSS Hover Effect and CSS Anime code
/* 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

I am not a professional but as i am aware there is no such thing as hover thing on mobile?
The closest and yet maybe the best thing in my opinion is to make a hover effect for desktop version and "onclick" effect for mobile version.
I am pointing again for hover you must have mouse to hover over it if you get the idea?
Hope it helps.