How to create this hover effect on portfolio page? - html

Question

I'm trying to write a homepage with this little effect on a hover.
It should look something like this:
How would you do this? My code does not work like it should.
.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

Something like this?
.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>