On Hover Höhe Übergang funktioniert nicht

Question

Ich arbeitete an einigen übergangsbezogenen Boxen, wo ich auf dieses Problem stieß. Hier sind einige Bilder mit Graustufen. Wenn Sie auf ihnen schweben, kommen sie in ihren normalen Zustand. Was das eigentliche Problem ist, wenn Sie auf dem Bild schweben, ist eine Klasse mit Rahmen und spezifischer Höhe, die angezeigt wird. Ich habe der Klasse eine bestimmte Höhe gegeben und wenn man auf ein Bild schwebt, sollte die Höhe der Klasse an einem bestimmten Punkt ansteigen und anhalten. Aber der Höhenübergang funktioniert nicht.

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

Jede Art von Hilfe ist willkommen. Vielen Dank im Voraus.

Answer 1

Wollen Sie so etwas?

Das Problem war die Anzeige: keine, die das Übergangsproblem verursachte. Ich fügte einen zusätzlichen Übergang hinzu, um die Änderung zu zeigen. Auch, da Sie absolute Positionierung verwenden, müssen Sie nicht die width erwähnen, können Sie nur die left und right Positionen definieren, auch statt display:none Eigenschaft, wie für visibility:hidden und visibility:visible gehen, wie in meinen unten genannten CSS-Klassen.

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>

Answer 2

können Sie verwenden

.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; 
    }