Removing pixel artifact links when trying to make Icon Image links-CodePudding

I'm trying to make icons that change color when hovered over, and link to a new tab clicked. The code I have does that just fine, but there are these weird '-' pixels that are elsewhere on the page (not where I want) and also change the color of the icon and go to a new tab when clicked. How do I remove these left over dash pixel links? Or, is there a different/better way to make these icon image links?

Here is HTML of the issue:

<html>
  <head>
    <link rel ="stylesheet" href="stackO.css">
  </head>
  <body>
  <div class = "webParent">
    <a href = "https://github.com" id = "icon1" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB"
      src = "ImagesWebsite\github2.png" alt = "github" width = "70" height = "70"/>
      <img class = "imageWEB2" 
      src = "ImagesWebsite\github1.png" alt = "github2" width = "70" height = "70"/>
    </a>
  </div>
  <div class = "webParent2">
    <a href = "https://youtube.com" id = "icon2" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB3"
      src = "ImagesWebsite\play1.png" alt = "play2" width = "70" height = "70"/>
      <img class = "imageWEB4" 
      src = "ImagesWebsite\play2.png" alt = "play1" width = "70" height = "70"/>
    </a>
  </div>
  </body>
</html>

Here is CSS of the issue:

  .webParent2 {
    display:contents;
  }
  .webParent2:hover .imageWEB4{
    visibility: hidden;
  }
  .imageWEB3 {
    position: relative; 
    top: 200px;
    left: 74px;
  }
  .imageWEB4 {
    position:relative; 
    top: 200px;
  }
  .webParent {
    display:contents;
  }
  .webParent:hover .imageWEB2{
    visibility: hidden;
  }
  .imageWEB {
    position:relative; 
    top: 200px;
    left: 74px;
  }
  .imageWEB2 {
    position:relative; 
    top: 200px;
  }

Below is a GIF of the aforementioned problem. I want to remove those links at the top.

CodePudding user response：

the underline is because of the default underline of the a tag you have. You can remove it by puttin text-decoration:none on your links so the line will disappear. Like below. Let me know

.webParent2, .wenParent {
    display:contents;
  }
  .webParent2:hover .imageWEB4{
    visibility: hidden;
  
  }
 

  

  .webParent:hover .imageWEB2{
    visibility: hidden;
  }
  
  .imageWEB {
     position:absolute;  
    top: 200px;
    left: 74px;
  }
  
  .imageWEB2 {
    position:absolute; 
    top: 200px;
    left: 74px;
  }
  
  
.imageWEB3 {
     position:absolute; 
    top: 200px;
    left: 148px;
   
  }
  .imageWEB4 {
     position:absolute; 
    top: 200px;
    left: 148px;
  }


a:-webkit-any-link {text-decoration: none;}

<html>
  <head>
    <link rel ="stylesheet" href="stackO.css">
  </head>
  <body>

  <div class = "webParent">
    <a href = "https://github.com" id = "icon1" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB"
      src = "https://www.clipartmax.com/png/middle/351-3511429_sample-inspection-report-lake-ozark-mo-inspection-doctor-sample-icon-png.png" alt = "github" width = "70" height = "70"/>
      </a>
      
      <a href = "https://github.com" id = "icon1" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB2" 
      src = "https://www.pngall.com/wp-content/uploads/8/Sample.png" alt = "github2" width = "70" height = "70"/>
    </a>
  </div>
  <div class = "webParent2">
    <a href = "https://youtube.com" id = "icon2" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB3"
      src = "https://www.clipartmax.com/png/middle/351-3511429_sample-inspection-report-lake-ozark-mo-inspection-doctor-sample-icon-png.png" alt = "play2" width = "70" height = "70"/>
      </a>
      
      <a href = "https://youtube.com" id = "icon2" target="_blank" rel="noopener noreferrer">
      <img class = "imageWEB4" 
      src = "https://www.pngall.com/wp-content/uploads/8/Sample.png" alt = "play1" width = "70" height = "70"/>
    </a>
    
  </div>

  </body>
</html>