如何在圖像中放置矩形並在CSS中製作懸停動畫？

Question

這就是我在尋找：

我也出現與我的HTML和CSS的形象，但不知道如何將矩形的。我想動畫我應該使用:hover選項爲我的crop類div。 我的代碼：http://jsfiddle.net/8t2hmxmn/

Answer 1

我想這將滿足您的需要，調整細節元素的高度，只需編輯裏面.details

html * { 
 
    box-sizing: border-box; 
 
} 
 
.crop { 
 
    background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg'); 
 
    width: 200px; 
 
    height: 150px; 
 
    background-position: center; 
 
    background-size: cover; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.shape { 
 
    width: 200px; 
 
    height: 50px; 
 
    color: black; 
 
} 
 
.details { 
 
    position: absolute; 
 
    bottom: -100%; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    padding: 5px 10px; 
 
    transition: all 1s; 
 
    color: white; 
 
} 
 
.crop:hover > .details { 
 
    bottom: 0; 
 
}

<div class="shape"> 
 
    <div class="crop"> 
 
    <div class="details"> 
 
     Yes, this is cat! 
 
    </div> 
 
    </div> 
 
</div>