Ajax Loader
×
HTML
<img class="photo" style="border: 1px solid black" src="http://blog.evernote.com/wp-content/uploads/2012/11/clearly_text.jpg" />
1
<img class="photo" style="border: 1px solid black" src="http://blog.evernote.com/wp-content/uploads/2012/11/clearly_text.jpg" />
2
<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>
3
 
4
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 
CSS
body {
1
body {
2
  background-color: grey;
3
  padding: 20px;
4
}
5
 
6
.evernote-add-wrap {
7
  position: absolute;
8
  top: 0;
9
  left: 0;
10
  transition: opacity all .3s;
11
  opacity: 0;
12
  display: inline-block;
13
  transition: opacity ease .3s;
14
}
15
 
16
.evernote-add-image {
17
  width: 12px;
18
  background-color: rgba(0,0,0,1);
19
  color: #fff;
20
  font-size: 11px;
21
  line-height: 11px;
22
  padding: 3px 4px;
23
  border-radius: 3px;
24
  opacity: .2;
25
  overflow: hidden;
26
  white-space: nowrap;
27
  transition: opacity ease .3s, width .3s;
28
  cursor: pointer;
29
  -webkit-user-select: none;
30
}
31
 
32
.evernote-add-image:hover {
33
  opacity: .5;
34
  transition: opacity ease .3s, width .3s;
35
}
36
 
37
.evernote-add-image img {
38
  display: inline-block;
39
}
40
 
41
.evernote-add-text {
42
  vertical-align: top;
43
  padding: 2px 0 0 1px;
44
  display: inline-block;
45
}
 
JavaScript
$('.photo').on('mouseenter', function () {
1
$('.photo').on('mouseenter', function () {
2
  wrapLeft = $('.photo').position().left;
3
  wrapTop = $('.photo').position().top + $('.photo').outerHeight();
4
  $('.evernote-add-wrap').css('left', wrapLeft + 5);
5
  $('.evernote-add-wrap').css('top', wrapTop - 26);
6
  $('.evernote-add-wrap').css('opacity', 1);
7
}).on('mouseleave', function () {
8
  $('.evernote-add-wrap').css('opacity', 0);
9
});
10
 
11
$('.evernote-add-wrap').on('mouseenter', function () {
12
  hoverWidth = $('.evernote-add-image').outerWidth() + $('.evernote-add-text').width() - 3;
13
  $('.evernote-add-wrap').css('opacity', 1);
14
  $('.evernote-add-image').css('width', hoverWidth);
15
}).on('mouseleave', function () {
16
  $('.evernote-add-image').css('width', 12);
17
});
 

Untitled

CSSDeck G+