图像悬停时的文字叠加

Question

我尝试了多种不同的解决方案，但到目前为止都没有奏效。 我想做的是将鼠标悬停在图像上时使动态文本覆盖图像。 我还想更改悬停颜色。 目前，文字始终在角落，而不是仅在悬停时显示（最好居中），并且悬停不透明度有效，但我似乎无法更改颜色。

这是我的代码：

<div class="container" ng-init="getCompanies()">

<!-- Repeater herev-->
<div class="col-lg-6">
    <div class="row vertical-align" ng-repeat="company in companies">
        <!-- Company Logos -->
        <div class="co-logo">
            <img src="{{company.Image}}" class="img" alt="{{company.Company}} {{company.Booth}}" />
            <!-- Hover Text -->
            <div class="textoverlay">
                {{company.Company}} {{company.Booth}}
            </div>
        </div>
    </div>
</div>

和我相应的CSS：

/* Company Logo Options */
.co-logo {
  padding: 5px;
  width: 300px;
  vertical-align: middle;
  margin-top: 20px;
  box-shadow: 0px 0px 0px 1px #000000;
}

.co-logo:hover {
   opacity: 0.3;
   width: 300px;
}

.textoverlay {
   width:300px; 
   background:white; 
   opacity:0.5;
}

任何想法都很棒。 谢谢

Answer 1

您应该查看>子组合器选择器，如下实现：

/* Company Logo Options */
.co-logo {
  position: relative; /*so the position of textoverlay will be relative to this div */
  padding: 5px;
  width: 300px;
  vertical-align: middle;
  margin-top: 20px;
  box-shadow: 0px 0px 0px 1px #000000;
}

.co-logo:hover {
  /* opacity: 0.3; */
  width: 300px;
}

.textoverlay {
  position: absolute; /* takes it out of the flow */
  top: 0;
  left: 0;
  width:100%;
  height: 100%; /* top left, full height / width */
  display: none; /* default state = hidden */

  background:white; 
  /* opacity:0.5; */
}

/* this is where the magic happens */
.co-logo:hover > .textoverlay
{
  display: block; /* show the child .textoverlay of the hovered .co-logo

}

JS Bin上的工作示例