You can use the php GD library which you most likely already have on your server since wordpresses uses it.
You can filter the image using imagefilter specifically IMG_FILTER_GRAYSCALE and/or IMG_FILTER_CONTRAST.
For example
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im, IMG_FILTER_CONTRAST, -100);
The hover would have to been done in javascript.
A much simpler solution would be to use the html5 canvas tag or a javascript image library like pixastic and wrestle with making it browser friendly ( not that hard using one of the html5 js kits)
Related Posts:
- Filter to remove image dimension attributes?
- Stop wordpress from hardcoding img width and height attributes
- How to automatically add rounded corners to thumbnails?
- WordPress adding scaled images that don’t exist (1536×1536 and 2048×2048)
- How to change image type for specific size?
- Is there a hook which fires after all thumbnails are generated?
- Featured image shortcode
- How to find attachment by it’s name?
- Cropped featured image replaces original image in gallery
- Image Scaling using get_the_post_thumbnail issue in WordPress
- Remove title attribute from images
- Insert an image into a post by API
- How to create thumbnails with a fixed width, so all of them will have the same width?
- How to limit number of images being printer out in “Set Featured Image” pop up?
- How to grab first image attached to post and display in RSS feed?
- Double thumbnails?
- No srcset for hard-cropped thumbnails
- Displaying a featured image (only img url) as the img src?
- Download button for Featured Image in every post – automatically
- Removing Title Tag from Thumbnails
- Show prev and next post links for parent post of current image in attachment page?
- Get original image from thumbnail URL
- How to check if user is uploading/setting an image as a featured image?
- attach unattached featured images to respective posts
- WordPress reduces the full size image and uses it as the original
- Thumbnails are bigger in size than the original image
- Remove image classes from post thumbnail output
- Exclude featured image from gallery in wp-admin
- Special purpose photos with each post
- SVG Featured image not shown in twitter
- Featured images not displaying at full resolution
- Set Post Image Using Shortcode
- Print specific image size in galley loop
- WordPress crops images differently on retina screens?
- Update old Post image metadata to ‘thumbnail’ wp_attached_file
- How can I add a “data-pin-nopin” the featured image html?
- WP keeps looking up post thumbnail on https even though wp-config says http
- Images stopped loadding after adding SSl
- How to replace images?
- Fixing image names for a site being restored
- Setup Featured image on all posts from thesis thesis_post_image custom field?
- Export xml use/import images from theme directory
- Generate images to be associated for tag and category?
- Get custom thumbnail sizes [duplicate]
- Bulk-add featured images in posts with no featured image
- Should I not compress my jpeg files before uploading to avoid double compression?
- Custom responsive ‘featured image’ sizes
- Is it possible to preserve original images in order to change image size later?
- the_post_thumbnail(‘medium’) setting some images width=1 height=1
- Generating a certain sized thumbnail on the fly?
- How do you import images from a URL in your post?
- How to set uploaded image as featured image wordpress
- What can i do add title to ‘large’ image?
- Retrieve Image Attachments Getting Post Thumbnail Image First
- Height and width attribute not setting by the_post_thumbnail
- add_image_size function not working
- How to force WordPress to upscale images?
- Why doesn’t WordPress use the smaller sized image?
- What sense makes medium_large_size_h => 0?
- How to set minimum required size for featured image?
- All Images not calling alt text
- How do I link a featured photo to it’s post?
- Can we use featured image as third party website image URL
- Is it possible to enable the ‘Link To’ field under ‘Attachment Display Settings’ for a Featured Image?
- Show (print) featured image all dimensions (height, width)
- Use default image as var
- add_image_size not working
- Serve different images per screen size and cache possible?
- Product Images Low Quality After Updating From WP 3.5 to 4 [closed]
- Placing a featured image into header
- Convert featured images into “product images”
- How to add thumbnails to posts and pages automatically in a uniformed fixed elegant way?
- Resize uploaded images [duplicate]
- How do I display the featured image from an image gallery using a reference in code? (example within)
- How to use the thumbnail size with catch_that_image
- Using different size thumbnails on different parts of my site… with functions.php?
- Thumbnail and image management
- attach several images to post + gallery
- my featured image of wordpress are not showing in the front end though image are uploaded in media library
- How to change Gallery image url in product page ? In function.php?
- How is called this thumbnail slider feature
- Custom image size not displaying with wp_get_attachment_image()
- How to echo images Urls from a wordpress post, that are relally in the post
- How to delete original image file after upload and resize
- An error has occurred during the upload process in wordpress version 5.3.2
- Force WordPress to always generate a thumbnail for original image
- Show featured image in all posts
- Get post thumbnail in specific size
- How to set a post featured image from an already made custom field
- featured image in custom poste type (backend)
- Custom Background for each page and post
- stop wordpress from resizing feature gif images
- Using custom field to change alt text for a featured image
- How to display image thumbnails on the search results page?
- Declare global variable that can be used on other function
- Get custom size of thumbnails
- Black and White Thumbnail in WordPress Gallery
- Getting top Image From the Gallery and printing out a thumbnail with Exact Dimensions
- How to import external media items into wordpress media library (without using storage)
- How can I use an image from an external source without uploading it to the media library