html - Surround dynamic img tag in an anchor tag -

i'm having problems anchor , image tags. image tags sitting inside (what essentially) div tag each, div tags have constant height , width values. image tags given constant height value, width can calculated based on aspect ratio , images not become distorted when they're resized fit inside div.

i want have anchor tag surrounding each image 2 reasons. (1.) images can act links, (2.) when user hovers on image, can display overlay on top of image.

putting image tag inside anchor tag solves problem of link, second problem, i'm stumped. need anchor tag dynamically size , position on respective image tag. ideally i'd avoid using javascript solve problem , stick css (if possible). have no objection adding little markup if needs be.

relevant html:

<listitem>      <a href="#"><img src="../images/image1.jpg"/></a>  </listitem>  <!--more listitems different sized images go here--> 

and css:

#picturelistcontainer listitem {      position: relative;     background-color: rgba(0,0,0,0.5);     display: block;     height: 257px;     width: 636px; }  #picturelistcontainer listitem img {      position: relative;     float: right;     height: 203px !important;     vertical-align: middle;     margin: 21px 296px 21px auto;      border: 6px solid white;     border-radius: 6px;     box-shadow: 0px 0px 3px rgba(0,0,0,0.7); } 

thanks in advance.

update: should maybe make clear overlay have same dimensions image, overlays image.

it can done using css , html: jsfiddle

html

<div class="listitem">     <a href="#">         <img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />         <span class="overlay-text">test</span>     </a> </div> 

css

.listitem {      position: relative;     background-color: rgba(0,0,0,0.5);     display: block;     height: 257px;     width: 636px;     overflow: hidden; }  .listitem img {      position: relative;     float: right;     height: 203px !important;     vertical-align: middle;     margin: 21px 296px 21px auto;      border: 6px solid white;     border-radius: 6px;     box-shadow: 0px 0px 3px rgba(0,0,0,0.7);     position: relative; }  .listitem span {     display: none;     position: absolute;     bottom: 10px;     left: 0;     background-color: rgba(0, 0, 0, 0.6);     width: 100%;     padding: 10px;     color: #fff; }  .listitem a:hover span {     display: block; } 

---

edit: overlay fits image

jsfiddle

css

.listitem {      position: relative;     background-color: rgba(0,0,0,0.5);     display: block;     height: 257px;     width: 636px; }  .listitem img {     border: 6px solid white;     border-radius: 6px;     box-shadow: 0px 0px 3px rgba(0,0,0,0.7); }  .listitem {     position: relative;     overflow: hidden;     display: inline-block; }  .listitem span {     display: none;     position: absolute;     bottom: 10px;     left: 0;     background-color: rgba(0, 0, 0, 0.6);     width: 100%;     padding: 10px;     color: #fff; }  .listitem a:hover span {     display: block; }