remove "icons" on image permalinks

• 

  nmegan · Member · Oct 4, 2013 at 8:52 pm

  • Copy link
  • Add topic to favorites

  Is there a way set css not to display the transparent icons that come up on image permalinks? An example is on my front page…the icon that comes up on rollover of the “Portfolio” image at the bottom left. I tried this css code but it didn’t work.

  #main .feature-thumbnail a:after {
  display: none;

  Thanks for any help in advance.

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

• 

  johndcoy · Staff · Oct 4, 2013 at 9:35 pm

  • Copy link

  Below is the CSS to remove the gallery icon that shows when hovering over a portfolio thumbnail.

  .format-gallery .feature-thumbnail .post-format-icon {display: none;}

  Please let me know if this helps or if you are referring to the opacity (transparency) that is applied when hover over images.

• 

  nmegan · Member · Oct 8, 2013 at 6:10 pm

  • Copy link

  This worked perfectly! Thanks so much. I wish I knew how you located the .format-gallery tag….I couldn’t find anything similar when I used the inspect element command.

• 

  johndcoy · Staff · Oct 9, 2013 at 5:11 am

  • Copy link

  There are a few different tools that anyone can use to inspect elements of a web page. I use Chrome DevTools in Google Chrome to inspect most page elements. When viewing a web page in Google Chrome, you can right-click on any page element and choose Inspect Element. Chrome DevTools will display the HTML and CSS that is used to make-up that specific element.

  Google provides pretty extensive documentation on Chrome DevTools. Don’t worry, it’s not as difficult as it may look.

  Happy to help!

  :)

• 

  justpi · Member · Oct 9, 2013 at 5:18 am

  • Copy link

  Or Firebug in Firefox, or Web Inspector in Safari.

• 

  nmegan · Member · Oct 9, 2013 at 1:00 pm

  • Copy link

  Thanks for the info. I have been trying to use the Inspect Element in Chrome but the info it returns is pretty dense. Thanks for the link…maybe that will help me navigate.

• 

  designsimply · Member · Oct 9, 2013 at 6:01 pm

  • Copy link

  You might also check out the short screencasts at http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

• 

  johndcoy · Staff · Oct 9, 2013 at 6:11 pm

  • Copy link

  @designsimply
  That documentation is perfect! Thank you for the assistance.

• 

  designsimply · Member · Oct 10, 2013 at 4:25 pm

  • Copy link

  @johndcoy, yay ! If you think of any other documentation you think would be helpful to add, let me know.