Noissue - Lower opacity of media images on hover on abp.org homepage

static/css/index.css

 #content
 {
   padding-top: 5em;
   margin: 0 auto;
 }
 
 #key-facts h1
 {
   font-size: 16px;
 }
@@ skipping 717 matching lines @@
 }
 
 #media-list a 
 {
   position: relative;
   display: block;
 }
 
 #media-list a:hover img
 {
-  opacity: 0.2;
+  opacity: 0.3;
 }
 
 #media-list a:hover:after
 {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
+  top: 50%;
+  left: 50%;
+  height: 1em;
+  width: 1em;
+  padding: 1em;
+  margin-left: -1em;
+  margin-top: -1em;
+  border-radius: 50%;
+  background-color: #000;
   background-image: url(../img/external-icon.png);
-  background-image: url(../img/external-icon.svg, none);
+  background-image: linear-gradient(transparent, transparent), 
+                    url(../img/external-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 1em;
 }
 
 @media (min-width: 768px)
 {
   #media-header small
   { 
     display: none; 
@@ skipping 44 matching lines @@
   {
     #media-list
     {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
   }
 
 }