CSS 호버 효과 부트 스트랩 썸네일

Question

CSS 호버 효과에 부트 스트랩 썸네일 추가에 대한 두통이있었습니다. 현재 데스크톱에서 볼 때 올바르게 표시됩니다. 그러나 모바일 장치에서 볼 때 여전히 올바르게 움직이지는 않습니다. 친절하게 나에게 약간의 해결책을 줄 수 있습니까? 내가 사용하는 샘플 호버는 아래 링크에서 제공됩니다. http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

하지만이 호버 효과는 휴대 기기에서 작동하지 않는다는 것을 알고 있습니다. 더 효과적인 솔루션을 제공하십시오.

다음은 HTML 및 CSS 코드입니다. 제발 친절하게 봐. 감사. 아래

아래

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

HTML

입니다 CSS 호버 효과와 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"효과에 대한 호버 효과를 만드는 것입니다.

호버를 다시 가리키고 있습니다. 아이디어를 얻으면 마우스를 올려 놓아야합니다.

희망이 있습니다.