在懸停高度轉換不起作用

我正在研究一些與轉換有關的框，我碰到這個問題。這裏是一些灰度圖像。當你徘徊在他們身上時，他們會回到正常狀態。當你將鼠標懸停在圖像上時，實際存在的問題是顯示的是具有邊框和特定高度的類。我給了班級特定的高度，當你在圖像上徘徊時，班級的高度應該增加並停在某個特定點上。但是，高度過渡不起作用。在懸停高度轉換不起作用

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

任何形式的幫助表示讚賞。預先感謝您。

來源

2017-09-16 Mohammed wahed khan

打開此鏈接，它可能會幫助你[https://stackoverflow.com/questions/3311299/css-transition-not-working-for-percentage-height][1] – naufalhfzhn

你想要這樣的東西嗎？

問題是顯示：無，這是導致轉換問題。我添加了一個額外的轉換來顯示更改。另外，由於您使用的是絕對定位，所以您不必提及width，您可以只定義left和right位置，而不是使用display:none屬性，如何在visibility:hidden和visibility:visible之間轉換，如下面的CSS類所示。

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

段：

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

來源

2017-09-16 07:24:24

謝謝你的工作 –

@Mohammedwahedkhan你歡迎！ –

這正是我需要再次感謝。 –

可以使用

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

來源

2017-09-16 10:14:55

在懸停高度轉換不起作用

回答

相關問題