I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is always in the corner rather than only appearing on hover (I prefer it centered), and while the hover opacity is working, I am unable to change the color.
Here is the code snippet I am using:
<div class="container" ng-init="getCompanies()">
<!-- Repeater here -->
<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>
As for 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 suggestions or ideas would be greatly appreciated. Thank you!