After the image is displayed, the IMG becomes the “replacement element”, and the replacement element cannot be set as a pseudo-element because the content content is replaced by the image. So we can use pseudo classes, and we need to note that variables inside attR cannot be quoted.

<div>
    <img src="xxx.gif" alt="lululu"> </div> <style> div { width: 100px; height: 100px; overflow: hidden; } img { display: inline-block; width: 100%; height: 100%; position: relative; } img::after { content: attr(alt); /* Generate Alt message */ position: absolute; left: 0; bottom: 0; right: 0; Background - color: rgba (0, 0, 5); transform: translateY(100%); /* Alt message hide */ transition: transform.2s; Hover ::after {transform: translateY(0); hover: after {transform: translateY(0); /* Alt message display */} </style>Copy the code