휴대 전화에서 버튼을 표시해야합니다.

Question

내 정보 페이지의 이미지에 사용하고있는 매우 호버 효과가 있습니다. 커서가 이미지 위로 마우스를 가져 가면 불투명도가 높아져 이미지 가운데에서 자세히보기 버튼이 표시되고 사용자는 버튼을 클릭하여 실제 바이오 페이지로 이동합니다.

모바일에서는 사용자가 클릭 할 수는 없지만 대신 버튼을 눌러 바이오 페이지로 이동할 수 있어야합니다. 모바일에서 테스트 할 때 문제가 발생합니다. 버튼을 표시 할 수 없습니다. 모두, 그리고 이미지를 누르면보기가 더 이상 표시되지 않습니다.

이미지 자체는 바이오 페이지에 대한 링크가 아니며 버튼 만 누르면 바이오 페이지로 이동합니다. 이미지를 바이오에 링크시켜야합니까? 또는 모바일에 버튼을 표시하는 또 다른 방법이 있습니까? 고맙습니다.

당신의 .center-container 선택이 절대적으로 위치하기 때문에 될 수 HTML

<div id="about"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
     <div class="imgAbout"> 
      <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio"> 

     <div class="center-container"> 
      <a class="btn btn-sm btn-custom" href="bios/teamBio.html">View More</a> 
     </div> 
     </div> 
     <h2>Name</h2> 
     <h3>Chairman &amp; CEO<br> 
     Senior Wealth Advisor</h3> 
    </div> <!-- end col-md-4 --> 

    <div class="col-md-4"> 
     <div class="imgAbout"> 
     <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio"> 

     <div class="center-container"> 
      <a class="btn btn-sm btn-custom" href="bios/teamBio.html">View More</a> 
     </div> 
     </div> 
     <h2>Name</h2> 
     <h3>President<br> 
     Senior Wealth Advisor</h3> 
    </div> 

    <div class="col-md-4"> 
     <div class="imgAbout"> 
     <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio"> 

     <div class="center-container"> 
      <a class="btn btn-sm btn-custom" href="bios/teamBio.html">View More</a> 
     </div> 
     </div> 
     <h2>Name</h2> 
     <h3>Chief Operating Officer</h3> 
    </div> 
    </div> <!-- end row --> 
</div> <!-- end Container --> 
</div> <!-- end About --> 

CSS

/*======= about ========*/ 
#about p { 
    text-align: center; 
    padding-bottom: 15px; 
} 

#about h3 { 
    margin-top: -5px; 
    padding-bottom: 15px; 
} 

#about .team h2 { 
    font-weight: 700; 
    font-variant: small-caps; 
} 

#about h2 { 
    text-align: center; 
} 

#about h3 { 
    text-align: center; 
    color: #5C615F; 
} 

#about img { 
    margin: 0 auto; 
} 

.imgAbout { 
    position: relative; 
    background: #1C1C1C; 

    border-radius: 10px; 
} 

.imgAbout img { 
    display: block; 
    height: auto; 
    transition: opacity .2s ease-in-out; 
    -moz-transition: opacity .2s ease-in-out; 
    -webkit-transition: opacity .2s ease-in-out; 
    -webkit-transform: translateZ(0); 

    border-radius: 10px; 
} 

.imgAbout:hover img { 
    opacity: 0.6; 
    transition: opacity .2s ease-in-out; 
    -moz-transition: opacity .2s ease-in-out; 
    -webkit-transition: opacity .2s ease-in-out; 
} 

.center-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    display: -webkit-flex; 
    align-items: center; 
    -webkit-align-items: center; 
    justify-content: center; 
    -webkit-justify-content: center; 
} 

.imgAbout .center-container .btn { 
    visibility: hidden; 
    opacity: 0; 

    -webkit-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out; 
    -moz-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out; 
    -ms-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out; 
    -o-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out; 
    transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out; 
} 

.imgAbout:hover .center-container .btn { 
    visibility: visible; 
    opacity: 1; 
} 

/*======= jumbotronAbout ========*/ 
.jumbotronAbout { 
    height: 325px; 
    margin-top: -20px; 
    margin-bottom: 0; 
    background-image: url('../img/pier.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 0 25%; 

    margin-bottom: 30px; 

    -webkit-box-shadow: 0 3px 4px 0 rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0 3px 4px 0 rgba(50, 50, 50, 0.75); 
    box-shadow:   0 3px 4px 0 rgba(50, 50, 50, 0.75); 

    display: flex; 
    display: -webkit-flex; 
    align-items: center; 
    -webkit-align-items: center; 
} 

#about h1 { 
    /*color: #FAFAFA;*/ 
    text-align: center; 
    font-size: 2.571rem; /*36px*/ 
    font-variant: small-caps; 
} 


/*================================================== 
=    Media Queries      = 
==================================================*/ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 
    #about p { 
    text-align: left; 
    } 
} 

/* Medium devices (medium devices, 992px and up) */ 
@media (min-width: 992px) { 
    #about h2 { 
    font-size: 1.714rem; /*24px*/ 
    text-align: left; 
    } 

    #about h3 { 
    font-size: 1.286rem; /*18px*/ 
    text-align: left; 
    } 

    #about h1 { 
    font-size: 3.286rem; /*46px*/ 
    } 
} 

Answer 1

이 같은 시도 :

$('.imgAbout').click(function(){ 
    $(this).find('.center-container .btn').css('visibility', 'visible'); 
    $(this).find('.center-container .btn').css('opacity', '1'); 

}); 

Answer 2

. z- 인덱스를 사용해야 할 수도 있습니다.

시도 :

.imgAbout img { 
    border-radius: 10px; 
    display: block; 
    height: 20px; //<-- need to specify a height when absolutely positioned 
    position: absolute; //<--added this 
    transition: opacity 0.2s ease-in-out 0s; 
    width: 100%; 
    z-index: 50; //<--added this 
} 

그리고

.center-container { 
    align-items: center; 
    bottom: 0; 
    display: flex; 
    height: 20px; //<--added this 
    justify-content: center; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 100; //<--added this 
}