I managed to create a hover effect over a series of images that displays additional information when hovered over. Below is the code I used:
HTML
<ul class="photo-grid">
<li>
<a href="https://www.abglobal.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1773 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/101ABGlobal.png" alt="Client SoHo Dragon" width="125" height="125" />
<figcaption><p>AB is a leading global investment-management and research firm. We bring together a wide range of insights, expertise and innovations to advance the interests of our clients around the world.</p></figcaption>
</figure>
</a>
</li>
// more list items with similar structure for different clients...
</ul>
CSS
.photo-grid {
overflow:auto;
max-width: 700%;
text-align: center;
}
.photo-grid li {
display: inline-block;
width: 125px;
}
// more CSS styles as provided in the original code...
The issue I'm facing is that while this code works fine on Microsoft Edge, Internet Explorer, and Firefox, it doesn't render correctly on Google Chrome. I tried clearing the browser cache but the problem persists. For further reference, please see the JSFiddle link below: