Question

我有一个循环中的多个图像。如果我将鼠标悬停在图像上，则仅该特定图像显示为重叠。但是覆盖会影响到整个容器。

如果我将鼠标悬停在第二张图像上，则覆盖层仅应在第二张图像上起作用。所有图片都一样
“位置：相对”正在影响其他一些阶级影响。

var myApp = angular.module('myApp',[]);
myApp.controller('mainCtrl',function($scope){
    $scope.images  = [
        "https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362",
        "https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362",
        "https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362",
        "https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362",
        "https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362"
    ];

    
});

 .container{
  padding: 1em 0;
  float: left;
  width: 50%;
}
.content {
  position: relative;
  margin: auto;
  overflow: hidden;
  
}
.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay{
  opacity: 1;
}
.content-image{
  width: 100%;
}
.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}
.fadeIn-bottom{
  top: 80%;
}

 
 <div ng-app="myApp" class="container"  ng-controller="mainCtrl">
  <h3 class="title">Text fadeIn bottom</h3>
  <div class="content">
      <div class="content-overlay"></div>
     
      <div class="" ng-repeat="image in images ">
      <img ng-src="{{ image }}" />
      </div>
      
      <div class="content-details fadeIn-bottom">
        <h3 class="content-title">This is a title</h3>
        <p class="content-text">This is a short description</p>
      </div>
    </a>
  </div>
</div>

css职位不接受此职位。任何人都可以更新答案

CSS覆盖不适用于该特定图像

0 个答案: