圖像懸停時的文字疊加

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上的工作示例