Untitled

<img class="photo" style="border: 1px solid black" src="http://blog.evernote.com/wp-content/uploads/2012/11/clearly_text.jpg" />

<div class="evernote-add-wrap"><div class="evernote-add-image"><img src="http://commondatastorage.googleapis.com/johnius/evernote-elephant.png" /> <span class="evernote-add-text">Clip</span></div></div>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

body {

  background-color: grey;

  padding: 20px;

}

.evernote-add-wrap {

  position: absolute;

  top: 0;

  left: 0;

  transition: opacity all .3s;

  opacity: 0;

  display: inline-block;

  transition: opacity ease .3s;

}

.evernote-add-image {

  width: 12px;

  background-color: rgba(0,0,0,1);

  color: #fff;

  font-size: 11px;

  line-height: 11px;

  padding: 3px 4px;

  border-radius: 3px;

  opacity: .2;

  overflow: hidden;

  white-space: nowrap;

  transition: opacity ease .3s, width .3s;

  cursor: pointer;

  -webkit-user-select: none;

}

.evernote-add-image:hover {

  opacity: .5;

  transition: opacity ease .3s, width .3s;

}

.evernote-add-image img {

  display: inline-block;

}

.evernote-add-text {

  vertical-align: top;

  padding: 2px 0 0 1px;

  display: inline-block;

}

$('.photo').on('mouseenter', function () {

  wrapLeft = $('.photo').position().left;

  wrapTop = $('.photo').position().top + $('.photo').outerHeight();

  $('.evernote-add-wrap').css('left', wrapLeft + 5);

  $('.evernote-add-wrap').css('top', wrapTop - 26);

  $('.evernote-add-wrap').css('opacity', 1);

}).on('mouseleave', function () {

  $('.evernote-add-wrap').css('opacity', 0);

});

$('.evernote-add-wrap').on('mouseenter', function () {

  hoverWidth = $('.evernote-add-image').outerWidth() + $('.evernote-add-text').width() - 3;

  $('.evernote-add-wrap').css('opacity', 1);

  $('.evernote-add-image').css('width', hoverWidth);

}).on('mouseleave', function () {

  $('.evernote-add-image').css('width', 12);

});