How do I remove the underline from images with links?

• 

  mstdcomputerclub · Member · Feb 8, 2015 at 10:31 pm

  • Copy link
  • Add topic to favorites

  I would like to make an image on my page link to another page, but the image is displayed with an underline when I add the link. I’d like to keep text links on my site underlined but prevent images from being underlined.

  Right now, in my html I have:
  <img class=”alignnone size-thumbnail wp-image-117″ src=”https://mstdcomputerclub.files.wordpress.com/2015/01/mscc-badge2.png?w=150″ alt=”Purple and white sticker badge with camera in center and name of workshop around edges.” width=”150″ height=”150″ />

  In my CSS editor, I added:
  .image, .image:hover{
  text-decoration: none;
  border-bottom: none;
  }
  But this didn’t work. Could you please offer advice on what else to try?

  I am using the Edin theme in WordPress.com with the Custom Design Upgrade.

  The blog I need help with is: (visible only to logged in users)

• 

  lizthefair · Member · Feb 9, 2015 at 2:16 pm

  • Copy link

  I’m not seeing any images with underlines. . . could you add the link back so I can see the problem? Once I can see it I’ll be able to help you :)

• 

  mstdcomputerclub · Member · Feb 9, 2015 at 2:30 pm

  • Copy link

  Sorry for the confusion. The page is: http://mstdcomputerclub.com/members/cait/

  The images with the links are the badges at the bottom.

  Currently the HTML is: <img src=”https://mstdcomputerclub.files.wordpress.com/2015/02/digitizethis_badge.jpg?” alt=”Sticker badge for digitization session. Camera in center.” width=”120″ /> <img src=”https://mstdcomputerclub.files.wordpress.com/2015/02/htmlcranberry.jpg?” alt=”Sticker badge for HTML/CSS session. Computer in center.” width=”120″ />

  The CSS I added to the editor is:
  .image, .image:hover{
  text-decoration: none;
  border-bottom: none;
  }

• 

  lizthefair · Member · Feb 9, 2015 at 3:12 pm

  • Copy link

  Try this instead:

  .entry-content a:not([class^="button"]), .page-content a:not([class^="button"]) {
  border-bottom: none;
  }

  I know it will remove the boarder from the images in question, but if it has other unintended consequences, let me know :)

• 

  mstdcomputerclub · Member · Feb 9, 2015 at 3:19 pm

  • Copy link

  Thanks! That worked, and so far I don’t see any unintended side effects.

• 

  lizthefair · Member · Feb 9, 2015 at 4:37 pm

  • Copy link

  That’s great news :)

  Let me know if you need anything else!