<!DOCTYPE html> <html lang="en"> <head> <title> CSS 3 Gray-Scale Filter Effect</title> <meta charset="UTF-8"> <style> img.complete-gray { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } img.partial-gray { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%); } table td{ padding: 10px; text-align: center; border: 0px !important; } </style> </head> <body> <table> <tr> <td> <img src="PUBG-IMAGE.png" alt="PUBG"> </td> <td> <img class="complete-gray" src="PUBG-IMAGE.png" alt="PUBG"> </td> <td> <img class="partial-gray" src="PUBG-IMAGE.png" alt="PUBG"> </td> </tr> <tr> <td>Grayscale(0)</td> <td>Grayscale(50%)</td> <td>Grayscale(100%)</td> </tr> </table> </body> </html>
