html - Padding changes when the browser is zoomed in or out -

i have thumbnail image , smaller image overlaps thumbnail image. padding changes smaller overlapping image zoom in , out , problem exist chrome browser. working fine ie , firefox. tried using percentage set padding values smaller image problem still exist. here images.

this html

   <div class="car-item">                          <div class=" car-image">                            <img src="/~/media/images/thumb.ashx" alt="image 1" />                          </div>                              <div class="car video">                                 <a href="#">video</a>                             </div>      <div> 

position car video absolute position car item relative , car-image static

you have issues @ times when using percentages. example of when use absolute positioning.

i have no idea code looks here basic example of how accomplish have pictured above absolute positioning. used span tag instead of additional image tag should work same.

you might have modify html , css little furthor work in environment.

http://jsfiddle.net/6c8gt/

here updated jsfiddle (http://jsfiddle.net/6c8gt/1/) uses markup , 1 reduced markup (http://jsfiddle.net/6c8gt/2/). don't need divs unless have plans them in future.

i did have posted below modified css match html. you'll have check out jsfiddles.

html

<div class="container">     <img class="thumb" src="http://lorempixel.com/300/200/" />     <span>video</span> </div> 

css

.container {     position: relative; } .container img {     display: block; } .container span {     color: white;     background-color: black;     padding: 5px 10px;     position: absolute;     left: 0;     bottom: 0; }