data-hover not showing up when hovering over images

Question

I'm working on a portfolio website and want the data-hover information to show up on the left bottom corner (I know I don't have the code written for that yet, it's because I haven't gotten it to show up at all.) when the mouse hovers over the image (both the thumb and the original), I've tried data-title and gotten the information to appear. but I don't think I can style it to the corner, Thank you for your time! Best, JTE

 .container2 { overflow: visible; position: relative; }.container2 li { position: absolute; z-index: 1; }.container2 li a { display: block; padding: 0; border: 0; }.container2 li img { margin: 0; padding: 0; outline: 0; }.container2.hover { display: block; padding: 0; border: 0; } a:hover, a:focus { outline: none; } a:link, a:visited, a:hover { color: #000; text-decoration: none; } a:hover { border-bottom: 1px solid #000; padding: 0; }

 <ul class="container-2"> <li class="work-item" id="001"> <a href="work/IMG_0138.jpg" data-hover="Information about piece #1"> <img class="thumb" src="work/IMG_0138 thumb.jpg" width="400" height="260" /> </a> </li> <li class="work-item" id="002" data-hover="Information about piece #2"> <a href="work/NewGoogle_photo.jpg"> <img class="thumb" src="work/NewGoogle_photo thumb.jpg" width="300" height="362" /> </a> </li> <li class="work-item" id="003" data-hover="Information about piece #3"> <a href="work/_56A5502-1.jpg"> <img class="thumb" src="work/_56A5502-1 thumb.jpg" width="300" height="160" /> </a> </li> </ul>

Answer 1

Show an absolutely positioned pseudo-element ( ::before ) when the link is hovered, and get it's content from attr(data-hover) :

 .container2 { overflow: visible; position: relative; }.container2 li { position: absolute; z-index: 1; }.container2 li a { display: block; padding: 0; border: 0; }.container2 li img { margin: 0; padding: 0; outline: 0; }.container2.hover { display: block; padding: 0; border: 0; } a { position: relative; } a:hover, a:focus { outline: none; } a:link, a:visited, a:hover { color: #000; text-decoration: none; } a:hover { border-bottom: 1px solid #000; padding: 0; } a:hover::before { position: absolute; bottom: 0; right: 0; color: silver; content: attr(data-hover); }

 <li class="work-item" id="001"> <a href="work/IMG_0138.jpg" data-hover="Information about piece #1"> <img class="thumb" src="https://picsum.photos/400/260" width="400" height="260" /> </a> </li> <li class="work-item" id="002"> <a href="work/NewGoogle_photo.jpg" data-hover="Information about piece #2"> <img class="thumb" src="https://picsum.photos/300/326" width="300" height="362" /> </a> </li> <li class="work-item" id="003"> <a href="work/_56A5502-1.jpg" data-hover="Information about piece #3"> <img class="thumb" src="https://picsum.photos/300/160" width="300" height="160" /> </a> </li>