user3786102 user3786102 - 4 months ago 12
CSS Question

Need button to be visible on mobile

I have a very nice hover effect I am using for the images on my About Page. When the cursor has hovered over the image, it gives a nice opacity and shows the View More button right in the middle of the image, the user can click the button and it will take them to the actual bio page.

When on mobile though, the user can't click but instead should be able to press the button to go to the bio page, the problem is when I test it on mobile I can't get the button to show at all, and if I press on the image I can't get the view more button to show.

The image itself is not a link to the bio pages, only the button will take the user to the bio page. Should I just make the image a link to the bio? Or is there another way to have the button show on mobile? Thank you.

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

Try something like :

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

});