<div class="piccard" id="pc-@x.Name">
<div class="tools" id="t-@ii">
<span id="d-@x.Name" class="glyphicon glyphicon-minus-sign trashicon"></span>
</div>
<a class="fancybox" title="@title" id="f-@x.Name" rel="gallery" style="" href="@(x.Path + "?image=" + encryptedtoken1)">
<img class="thumbs" data-pcon="@x.Name" onload="imgLoaded(this)" data-newimagename="" src="data:image/gif;base64,somerandomvalue///somerandomvalue" data-src="@(x.Path + "?image=" + encryptedtoken1)" id="i-@x.Name" alt="Loading..." />
</a>
<a id="srcinfo-@x.Name" data-filename="@x.Name" href="#imagedescription" style="@titledisplay" data-title="@title" data-description="@Description" @titledisplay data-lat="@x.Lat" data-lon="@x.Lon" data-make="@x.Make" data-ecapture="@x.ExifCaptureTime" data-model="@x.Model" data-imgsrc="@(x.Path + "?image=" + encryptedtoken1)" class="addtitlebutton fancybox">
<span id="imt-@x.Name" class="stitle" style="opacity:@Model.Titleopacity">@title</span>
</a>
<div class="tools" id="imgT-@ii">
<span id="imgT-@x.Name" class="glyphicon glyphicon-retweet imgTransform"></span>
</div>
</div>
Above is my html. I want to place class imgTransform to bottom right of parent div which has class piccard. How do i do it?
What I have tried:
.piccard {
margin: 0;
border-radius: 5px;
vertical-align: top;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 15px;
right: 0;
}
.imgTransform{
position: relative;
margin: 5px;
float: right;
color: #ffffff;
font-size: 1em;
-moz-transition: .1s;
-o-transition: .1s;
-webkit-transition: .1s;
transition: .1s;
bottom: 5px;
}