Изображение показать текст при зависании как «опрокидывание»

Question

Я хочу сделать «перевернутый текст», когда вы наведете контейнер изображения.

Я сделал это хорошо, но только с абсолютным положением, но я не могу получить его правильно с относительным положением.

Теперь текст приходит после того, как изображение, но мне нужно текст как небольшой накладкой в ​​нижней части изображения

<div class="ce_image team block"> 
    <figure class="image_container"> 
    <img src="assets/images/c/De****-D1-6a7e730c.jpg" width="300" height="300" alt=""> 
      <figcaption class="caption" style="width:300px">The text i want to display on hover</figcaption> 
    </figure> 
</div> 

CSS: (пс: я Quess мой CSS действительно плохо, никогда не делал чего-л, как это)

.image_container { 
     position: relative; 
     display: inline-block; 
     padding: 0.75em; 
     border: 1px solid #b2b9c4; 
     border-radius: 2px; 
     background: #ffffff; 
     background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
     background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
     background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
     background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    } 
    .team .image_container figcaption, .team .image_container .caption { 
     width: 100% !important; 
     padding: 0.42857em 0 0; 
     font-size: 1.0em; 
     display: none !important; 
     display: fixed; 
     color: #000000; 
     font-weight: bold; 
     position: static !important; 
     text-align: center; 
     top: 100px; 
     z-index: 999; 
     opacity: 0; 
     transition: opacity 0.2s linear !important; 
     left: 0px; 
     background: rgba(255, 255, 255, 0.9); 
     position: relative; 
    } 

.team .image_container:hover figcaption, .team .image_container:hover .caption { 
    width: 100% !important; 
    padding: 0.42857em 0 0; 
    font-size: 1.0em; 
    color: #000000; 
    font-weight: bold; 
    text-align: center; 
    top: -31px; 
    z-index: 999; 
    opacity: 1; 
    left: 0px; 
    background: rgba(255, 255, 255, 0.9); 
    position: relative; 
    display: block !important; 
} 

Fiddle с CSS здесь:

https://jsfiddle.net/vm73gfhn/

Answer 1

Я обновил некоторые из ваших CSS, чтобы текст находился внизу. Вам нужна позиция абсолютной, а не положение относительно:

.image_container { 
    position: relative; 
    display: inline-block; 
    padding: 0.75em; 
    border: 1px solid #b2b9c4; 
    border-radius: 2px; 
    background: #ffffff; 
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
} 
.team .image_container figcaption, .team .image_container .caption { 
    display: none !important; 
} 

.team .image_container:hover figcaption, .team .image_container:hover .caption { 
    width: 100% !important; 
    padding: 0.42857em 0 0; 
    font-size: 1.0em; 
    color: #000000; 
    font-weight: bold; 
    text-align: center; 
    bottom: 0px; 
    z-index: 999; 
    opacity: 1; 
    left: 0px; 
    background: rgba(255, 255, 255, 0.9); 
    position: absolute; 
    display: block !important; 
} 

JSFIDDLE

Дополнительной

Если вы хотите работать для мобильных и таблеток затем использовать медиа-запросы: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp