<img class="photo" style="border: 1px solid black" src="http://blog.evernote.com/wp-content/uploads/2012/11/clearly_text.jpg" />
<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 {
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;
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 () {
$('.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);
});