How to hide a specific image using CSS code

2 thoughts on “How to hide a specific image using CSS code”

1. 

   illphated

   April 24, 2025 at 23:03

   no by attachement ID

   ChatGPT said:
   Ahh got it — if you want to hide the image by attachment ID, you’ll need to check how it’s rendered in the HTML or how WordPress outputs it, because standard tags don’t include the attachment ID directly in the HTML.

   However, here are your best options:

   ✅ Option 1: Add a custom class using the attachment ID via WordPress PHP
   If you’re editing a theme or plugin template, you can output a custom class like this:

   php
   Copy
   Edit
   echo wp_get_attachment_image(123, ‘large’, false, array(‘class’ => ‘hide-this-image attachment-id-123’));
   Then in your CSS:

   css
   Copy
   Edit
   img.attachment-id-123 {
   display: none;
   }
   ✅ Option 2: Use CSS to target based on src if ID is not in HTML
   If the image tag looks like this and has no ID:

   html
   Copy
   Edit
   
   You can still hide it like before:

   css
   Copy
   Edit
   img[src*=”cropped-illphated_logo-1.png”] {
   display: none;
   }
   🛠️ Want it dynamic? Here’s how to add the ID to the class (via WordPress filter):
   Add this to your theme’s functions.php:

   php
   Copy
   Edit
   function add_attachment_id_to_image_class($attr, $attachment, $size) {
   $attr[‘class’] .= ‘ attachment-id-‘ . $attachment->ID;
   return $attr;
   }
   add_filter(‘wp_get_attachment_image_attributes’, ‘add_attachment_id_to_image_class’, 10, 3);
   Then in your CSS:

   css
   Copy
   Edit
   img.attachment-id-123 {
   display: none;
   }

   Reply
2. 

   illphated

   April 24, 2025 at 23:04

   remove by attachement ID

   img[data-attachment-id=”22″] {
   display: none;
   }

   Reply