proG proG - 4 months ago 12
CSS Question

CSS transition for opacity does not work

My problem is already stated in the title. I think I did everything correctly. However, the transition effect does not appear. Note that the hover effect actually appears and the writing inside h5 tag appears but without the transition effect. It is driving me crazy, any advise will be greatly appreciated.



a.jobBoxLink {
color: #B2B2B2;
-moz-box-shadow: 3px 0 0px 0 #F2F2F2;
-webkit-box-shadow: 3px 0 0px 0 #F2F2F2;
box-shadow: 3px 0 0px 0 #F2F2F2;
}
.jobBoxLink:hover {
text-decoration: none;
color: black;
display: block;
background #B2B2B2;
}
.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
height: 200px;
position: absolute;
width: 200px;
margin: 0;
opacity: 0;
-webkit-transition: opacity 5000ms;
-moz-transition: opacity 5000ms;
-o-transition: opacity 5000ms;
transition: opacity 5000ms;
}
a.jobBoxLink:hover .text-content {
opacity: 1;
}
.books {
-moz-box-shadow: 0 0 8px 3px #F2F2F2;
-webkit-box-shadow: 0 0 8px 3px #F2F2F2;
box-shadow: 0 0 8px 3px #F2F2F2;
border-radius: 5px;
height: 200px;
width: 200px;
margin-bottom: 10px;
margin-top: 10px;
padding-left: -100px;
alignment-adjust: central;
}

<div class="col-sm-4 col-md-2 BoxCol">
<a href="#" class="jobBoxLink ">

<div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;">
<h5 class="text-content">Place Name</h5>
</div>
<!-- Job boxes -->
</a>
<div class="caption">
<a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp;</a>
<span class="greyCaption"> 22</span>
<a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a>
</div>
<!--like caption -->
</div>




Answer

This is because you are applying css on hover of anchor and by default <a> is an inline element and if inspect element you see there is actually no height and width of <a>.

Use display:block in <a> to convert it to block element and css will work fine

a.jobBoxLink {
  color: #B2B2B2;
  display:block;
  -moz-box-shadow: 3px 0 0px 0 #F2F2F2;
  -webkit-box-shadow: 3px 0 0px 0 #F2F2F2;
  box-shadow: 3px 0 0px 0 #F2F2F2;
}
.jobBoxLink:hover {
  text-decoration: none;
  color: black;
  display: block;
  background #B2B2B2;
}
.text-content {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  height: 200px;
  position: absolute;
  width: 200px;
  margin: 0;
  opacity: 0;
  -webkit-transition: opacity 5000ms;
  -moz-transition: opacity 5000ms;
  -o-transition: opacity 5000ms;
  transition: opacity 5000ms;
}
a.jobBoxLink:hover .text-content {
  opacity: 1;
}
.books {
  -moz-box-shadow: 0 0 8px 3px #F2F2F2;
  -webkit-box-shadow: 0 0 8px 3px #F2F2F2;
  box-shadow: 0 0 8px 3px #F2F2F2;
  border-radius: 5px;
  height: 200px;
  width: 200px;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-left: -100px;
  alignment-adjust: central;
}
<div class="col-sm-4 col-md-2 BoxCol">
  <a href="#" class="jobBoxLink ">

    <div class="books" style="background-image:  url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;">
      <h5 class="text-content">Place Name</h5>
    </div>
    <!-- Job boxes -->
  </a>
  <div class="caption">
    <a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp;</a>
    <span class="greyCaption"> 22</span> 
    <a href="#" class="icon">   &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
  </div>
  <!--like caption -->
</div>