Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead of this desired behavior, the images are flipping when hovered over. I am encountering difficulties in achieving the intended outcome. Is there a method to accomplish this?
**hovers.html**
<html>
<div ng-repeat="a in modules">
<md-card class="image"> <img src="a.image_url" />
<div class="overlay">
/*Some items */
</div>
</md-card> </div> </html>
**style.css**
.image {
position: relative;
display: inline-block;
width: 100%; }
.overlay {
display: none; }
.image:hover {display:none;}
.image:hover .overlay {
width: 100%;
height: 100%;
background: rgba(1, 0, 0, 0.2);
position: absolute;
top: 0;
overflow: auto;
left: 0;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.image:hover .overlay img {
vertical-align: top;
}
**home.html**
<div class="columns" width="100%" height="100%">
<custom-hover ng-repeat="a in modules"
module="a" layout="row">
</custom-hover>
</div>
home.js
"use strict";
function customHover($compile){
return {
restrict: 'E',
scope: {
module: "=",
},
templateUrl: "hovers.html",
controller: function($scope, $mdDialog) {
console.log("=======",$scope.module)
}
}
};
module.exports = customHover;