Rendre position absolute responsive

Bonjour

Pouvez-vous s'il vous plaît m'aider à rendre ce portfolio en responsive, car la div qui porte le texte a de position absolute, elle ne rend pas responsive, je ne sais pas pourquoi.

Voici le code html:

<div class="row">
<div class="col-sm-4 " id="texte">
<img src="images/web1.png" class="img-thumbnail" >
<div class="mask">
<h2>Titre portfolio</h2>
<p>paragraphe texte bla bla bla blaa...</p>
<button data-toggle="modal" href="texte.html" class="btn btn-primary" data-target="#more">Read More</button>
</div>
</div>
</div>

le code Css:

.img-thumbnail{
margin-bottom:20px;
display:block;
margin-top:20px;
margin-left:auto;
margin-right:auto;
position: relative;
max-width:400px;

}

#texte .mask{
opacity:0;
}


#texte .mask{
width:355px;
height:250px;
position: absolute;
overflow: hidden;
top: 25px;
left:32px;
opacity:0;
background-color:black;
color:white;
text-align:center;
font-family:georgian;
margin-right:10px;
overflow:hidden;}


}
#texte:hover .mask{
opacity:0.7;
}
#texte:hover img {
opacity:0.5;
}

pas compris ta question... tu cherche quoi, un redimensionnement de taille ? un changement de position ?

tu as des taille fixe sur ta div, donc tu peux oublier le redimensionnement.

width:355px;
height:250px;