After implementing the code for a simple image enlarge feature (showing a QR code image when the user hovers over the icon), I noticed an issue.
Interestingly, the same code is used on two designs, but it's not working on one of them.
To view the problem, check the footers of the pages where you'll find the WeChat icon next to other social icons.
The code is functioning correctly on
However, it's not working as expected on
CSS
ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin: 0;
padding: 0;
float: right;
}
ul.enlarge li{
margin: 0;
padding: 0;
}
ul.enlarge img{
margin: 0;
padding: 0;
display: block;
}
ul.enlarge span img{
opacity: 1 !important;
}
ul.enlarge span{
position:absolute;
top: -9999px;
}
ul.enlarge li:hover span{
top: -110px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 0px; /*distance from the left of the thumbnail to the left of the popup image*/
}
HTML
<ul class="enlarge"><li><img src="images/wc.png" width="32px" height="32px" alt="#" /><span><img src="images/qrcode.png" alt="QR" /></span></li></ul>