show vest on mouseover

by klode

HTML

<div ng-app="myApp">    
    <vested-tweetty ng-repeat="name in ['one', 'two', 'three']" name={{name}}></vested-tweetty>
</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('vestedTweetty', function () {
    return {
        template: '<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>',
        restrict: 'E',
        scope: {
            name: '@'
        },
        link: function (scope, el, attrs) {}
    };
});