Text Overlay on Image Hover

Question

I've tried multiple different solutions that I've found but none have worked so far. What I want to do is have dynamic text overlay an image when you hover over it. I'd also like to change the hover color. Currently the text is always in the corner rather than only showing up only on hover (centered would preferable) and the hover opacity works but I can't seem to change the color.

This is my code:

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

And my corresponding 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;
}

Any ideas would be great. Thanks

Answer 1

You should look into the > child combinator selector, implement it like this:

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

}

Working example on JS Bin