How do I remove the underline from images with links?
-
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)
-
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 :)
-
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;
} -
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 :)
-
-
- The topic ‘How do I remove the underline from images with links?’ is closed to new replies.