I would like to align the x button in the upper right corner of the image, see image and example:
.teste {
overflow: hidden;
display: inline-block;
margin-bottom: 5px;
vertical-align: middle;
text-align: center;
display: block;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn-teste {
position: relative;
overflow: hidden;
}
.btn-teste input[type=button] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.options {
position: absolute;
top: 8px;
right: 82px;
z-index: 999;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<br/><br/>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2 center-block text-center">
<div class="options">
<button type="button" class="btn btn-default" title="Remover">
<i class="fa fa-times"></i>
</button>
</div>
<span class="btn btn-default btn-teste">
<img class="teste" width="100px" height="150px" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" />
<div>
Teste <input type="button" class="file">
</div>
</span>
</div>How would you like it to be:
Theproblemhereisresponsiveness,whenyouincreaseordecreasethescreenwidth:
