Sure, if you’re using the Text view on the editor, give your image an ID if it’s just one image, or give it a class if it’s a group of similarly occurring images. Example:
Normal image insert
<img src="http://imgur.com/something.jpg" />
Image insert with ID
<img id="myImage" src="http://imgur.com/something.jpg" />
Image insert with class
<img class="myImages" src="http://imgur.com/something.jpg" />
If using the Visual view, just click on the image, click on the edit pencil and change the name in the Image CSS Class field. In your CSS,
Target ID names with:
#myImage {
filter: grayscale(100%); /* Standard CSS */
-webkit-filter: grayscale(100%); /* CSS for Webkit Browsers */
filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
filter: gray; /* Internet Explorer IE6-9 */
-webkit-filter: grayscale(1); /* Old WebKit Browsers */
}
#myImage:hover {
filter: grayscale(0%);
filter: none;
-webkit-filter: grayscale(0); /* Old WebKit */
}
If it’s a class, just change the # to a . symbol. Remember, ID’s are for single-case objects and classes are for reoccurring things. Like if you’re wanting to do this for a header image in every single post you do, use a class. If it’s a single photo on a certain post, use an ID.
.