Overlay von Bildern und Text

<style>


.mainimage {
  width: 95%;
  position: relativ;
  margin-right: 40px;
}


.image1  {
  width: 100px;
  position: absolute;
  top: 0;
  right: -40px;
}


figure img {
  width: 100%;
}


</style>


<img src="http://karitage.de/images/layoutbild/hundebereich/allhigh.jpg" class="mainimage" alt="">    
    <a class="" href="http://karitage.de/index.php/dogs/kate">
    <figure class="image1">
        <img src="http://karitage.de/images/layoutbild/hundebereich/katehigh.jpg" class="" alt="Kate">
        <div class="">
            <div>
                <div class=""><p>Kate of hopeful image</p></div>
            </div>
        </div>        
    </figure>
    </a>