Выезжающий текст к при наведении на картинку

a{
  position:absolute;
   top:80px;
   z-index:-1;
   transition:all 1s;
 
 }
 .img{
    background:url([url]http://goodfon.org/_ph/64/235694881.jpg);[/url]
    width:200px;
    height:100px;
    position:relative;
 }
.img:hover a{
   top:120px;
   
   }

.wrapper {
  position: fixed;
  left: 0;
  top: 50px;
  font-size: 0;
  display: inline-block;
}
 
.field {
  width: 250px;
  height: 150px;
  border: 1px solid black;
  float: right;
  margin-left: -250px;
  transition: 0.5s;
  box-sizing: border-box;
}
 
.field-button {
  width: 50px;
  height: 50px;
  background: red;
  float: right;
}
 
.field-button:hover ~.field {
  margin-left: 0;
  transition: 0.5s ease-in;
}
 
.field:hover {
  margin-left: 0;
  transition: 0.5s ease-in;
}

 .img{
    background:url([url]http://goodfon.org/_ph/64/235694881.jpg);[/url]
    width:200px;
    height:100px;
    position:absolute;
    left:-200px;
    transition:0.5s ease-in;
 }
 .img:before{
   content:'> >';
   line-height:30px;
   color:white;
   width:30px;
   height:30px;
   position:absolute;
   background:green;
   left:200px;
   border-radius:0 5px 5px 0;
 }
 .img:hover{
   left:0;
 }