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.5;
+  opacity: 0.2;
 }
 
 #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;

[juliandoucette, 2018/02/27 12:57:04]

NIT/Suggest: I think round edges would be nicer than sharp edges. This could be
accomplished via border-radius.

[ire, 2018/02/28 08:45:18]

Done.

+  margin-left: -1em;
+  margin-top: -1em;
+  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);

[ire, 2018/02/26 18:46:08]

The SVG image wasn't being served previously, I used the wrong way to serve it

[juliandoucette, 2018/02/27 12:57:04]

Acknowledged.

   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;
     }
   }
 
 }