show vest on mouseover

by klode

HTML

<div ng-app="myApp">    
    <vested-tweetty ng-repeat="name in ['one', 'two', 'three']" name={{name}}></vested-tweetty>
    
    <section class="info-area">

    <!-- book list -->
    <ul class="book-list">
        <li ng-repeat="tracker in ['one', 'two', 'three']">
            <!-- book tracker -->
            <book-tracker tracker="tracker"></book-tracker>
        </li>

        <li ng-show="vm.loadingCompleted" >
            <a href="#popup1" class="add-book lightbox">
                <div class="holder">
                    <span class="icon-holder">
                        <i class="icon-plus"></i>
                    </span>
                    ADD A BOOK
                </div>
            </a>
        </li>
    </ul>
</section>
    
<script type="text/ng-template" id="tpl.html">
  <div class="image-wrapper" ng-init="showOverlay=0" ng-mouseover="showOverlay=1" ng-mouseleave="showOverlay=0">
       <div class="tweetty">
            <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg"/>
       </div>
       <div class="image-vest" ng-show="showOverlay"><a href="#" style="color:#fff">{{name}}</a></div>
  </div>
</script>
</div>

CSS

.container {
  position: relative;
}
.image-wrapper {
  position: relative;
  display: inline-block;
}
.tweetty {
  overflow: auto;
  top: 0;
  left: 0;
}
.image-vest {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00f;
  width: 220px;
  height: 300px;
  opacity: 0.4;
  color: #fff;
}

JavaScript

angular.module('myApp', [])
    .directive('bookTracker', function () {
    return {
        templateUrl: 'tpl.html',
        restrict: 'E',
        scope: {
            tracker: '='
        },
        link: function (scope, el, attrs) {}
    };
});