Witam. Użyłbym pseudo elementu : after
<div class="oferta">
<a href="#"><img src="http://www.national-geographic.pl/media/cache/default_view/uploads/media/default/0001/88/30623595ba2f6516f14e6587b3dfde83623b8fac.png" alt="golibroda"></a>
</div>
body{
background-color: grey;
}
.oferta{
display: block;
width: 15%;
position: relative;
}
.oferta img{
display: block;
width: 100%;
height: auto;
}
.oferta:after{
content:"JAKIS TEKST";
background-color: rgba(188, 186, 186,.5);
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 22px;
padding: 45% 25%; /*ustawia tekst w odpowiednim miejscu*/
color: #890f0f;
}
.oferta:hover:after{
display: block;
cursor: pointer;
}