Html 图像悬停上的文本覆盖

我已经尝试了多种不同的解决方案，但迄今为止没有一种有效。我想做的是当你将鼠标悬停在图像上时，让动态文本覆盖在图像上。我还想更改悬停的颜色。目前，文本总是在角落里，而不是只在悬停时显示（最好居中显示），悬停不透明度有效，但我似乎无法更改颜色

这是我的代码：

<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>

---

任何想法都很好。谢谢

您应该查看

子组合器选择器，如下所示实现它：

/* 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

}

---

工作示例

也许您想展示一个玩具示例：我不知道如何解决的另一个问题是将徽标彼此相邻放置。我尝试使用3，但它只复制徽标。请注意，子选择器仅在支持CSS 2.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

}