CODEWITHSUNDEEP
htmlcss
Mohammed Wahed Khan
Mohammed Wahed Khan

Reputation: 898

On hover height transition not working

I was working on some transition related boxes where I bumped into this problem. Here are some images with grey scale. When you hover on them they come to their normal state. What the actual problem is when you hover on the image there is a class with border and specific height that is being displayed. I gave specific height to the class and when you hover on image the height of the class should increase and stop at one particular point. But, the height transition is not working.

.section-inner {
    width: 440px;
    margin: 0 auto;
}
.grid-img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.grid-img {
    background-color: #ffffff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    display: inline-block;
    margin-right: 50px;
    transition: all 0.8s ease-in-out;
}
.profile img {
    width: 150px;
    height: auto;
}
.img-caption {
    top: 10px;
    left: 5%;
    z-index: -1;
    height: 20%;
    position: absolute;
    display: none;
    width: 90%;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    border: 4px solid orange;
    display: block;
    height: 120%;
}
.dummy {
    position: absolute;
    bottom: 0;
}
.dummy h4 {
    font-size: 16px;
    padding-bottom: 10px;
}
<div class="section-inner"> 
 <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->
</div>

Any kind of help is appreciated. Thank you in advance.

Upvotes: 2

Views: 269

Answers (2)

Keshav Bhadouria
Keshav Bhadouria

Reputation: 199

you can use 

.img-caption {
   top: 10px;
   left: 5%;
   z-index: -1;
   height: 0%;
   position: absolute;
   width: 90%;
   border: 4px solid gray;
   transition: all 0.8s ease-in-out;
  }

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56307

Do you want something like this?

The problem was the display:none, which was causing the transition problem. I added an extra transition to show the change. Also since you are using absolute positioning you need not mention the width, you can just define the left and right positions, Also instead of using the display:none property, how about going for visibility:hidden and visibility:visible as demonstrated on in my below CSS classes.

CSS:

.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}

Snippet:

.section-inner {
    width: 440px;
    margin: 0 auto;
}
.grid-img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.grid-img {
    background-color: #ffffff;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    display: inline-block;
    margin-right: 50px;
    transition: all 0.8s ease-in-out;
}
.profile img {
    width: 150px;
    height: auto;
}
.img-caption {
    top: 0px;
    left: 0px;
    right:0px;
    visibility:hidden;
    z-index: -1;
    height: 20%;
    position: absolute;
    transition:all 1s ease;
    height: 20%;
    border: 4px solid gray;
}
.grid-img:hover .img-caption {
    z-index: 99;
    visibility:visible;
    border: 4px solid orange;
    display: block;
    height: 120%;
}
.dummy {
    position: absolute;
    bottom: 0;
}
.dummy h4 {
    font-size: 16px;
    padding-bottom: 10px;
}
<div class="section-inner"> 
 <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/dJHACQ/Road.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->

  <div class="atg-col-2 grid-img">
    <div class="profile">
      <img src="https://preview.ibb.co/jFhtXQ/adam_birkett_187521.jpg">
    </div><!-- .profile-->
    <div class="img-caption">
      <div class="dummy">
        <h4>SARA CAVIL</h4>
      </div>
    </div><!-- img-caption-->
  </div><!-- grid-img-->
</div>

Upvotes: 1

Related Questions