Как создать эффект зависания на странице портфолио?

Question

Я пытаюсь написать домашнюю страницу с этим небольшим эффектом на зависании.

Это должно выглядеть примерно так:

Как бы вы это сделали? Мой код не работает так, как должен.

.stage_wrapper { 
 
    margin: 0 auto; 
 
    width: 1100px; 
 
    height: auto; 
 
} 
 
.work { 
 
    margin-left: 8px; 
 
    margin-right: 5px; 
 
    margin-bottom: 15px; 
 
    display: inline-block; 
 
    height: 350px; 
 
    width: 350px; 
 
} 
 
.work img { 
 
    width: 350px; 
 
    height: auto; 
 
}

<div class="stage_wrapper"> 
 
    <div class="stage"> 
 
    <div class="work"> 
 
     <a href="#" target="_blank"> 
 
     <img src="//dummyimage.com/350" class="media" alt="#" /> 
 
     <div class="caption"> 
 
      <div class="work_title"> 
 
      <h1>Something in 3 rows</h1> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Что-то вроде этого?

.work { 
 
    width: 300px; 
 
    height: 300px; 
 
    line-height:300px; 
 
    text-align: center; 
 
    background-color: #2d3e50; 
 
    border: 10px solid #2a81b9; 
 
    color: white; 
 
    display: inline-block; 
 
} 
 
.work span { 
 
    display: none; 
 
    vertical-align: middle; 
 
} 
 
.work:hover span { 
 
    display: inline-block; 
 
} 
 
.work:hover img { 
 
    display: none; 
 
}

<div class="work"> 
 
    <span>Some text</span> 
 
    <img class="portfolio-image" src="http://dummyimage.com/300.png/09f/fff" width="300" height="300" /> 
 
</div>

Answer 2

Является ли следующий фрагмент кода, который вы пытаетесь получить?

.work { 
 
    display: inline-block; 
 
    height: 150px; 
 
    text-align: center; 
 
    color: white; 
 
    border: 10px solid gray; 
 
    position: relative; 
 
} 
 
.work div { 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; width: 100%; 
 
    background: gold; 
 
    display: none; 
 
} 
 
.work h2 { 
 
    position: absolute; 
 
    left: 50%; top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; padding: 0; 
 
} 
 
.work:hover div { 
 
    display: block; 
 
}

<div class="work"> 
 
    <img class="portfolio-image" src="http://dummyimage.com/150" /> 
 
    <div><h2>Heading</h2></div> 
 
</div>