It's a Css Snippet for Obsidian.md that adds functions to images. (Read my comment)

Image-Features-Obsidian-Md.css

/*std*/
img:not([alt*='#ico']):not([alt*='#hero']):not(.emoji):not(.img-view)
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  transition: width .3s ease-out;
}

img:not([alt*='#ico']):not(.emoji):not(.img-view):hover
{
  width: 100%;
  transition: width .3s ease;
}


/*hero*/
img[alt*='#hero']:not(.img-view)
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: width .3s ease-out;
}


/*invert*/
img[alt*='#invert']:not(.img-view)
{
  filter: brightness(.884) invert() hue-rotate(180deg);
}


/*icon*/
img[alt*='#ico']:not(.img-view)
{
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

What it does

• Adds special functions to images with css styles

Features

• Every image has 75% of original width size (what helps when you're reading)
  • On hover, you're zooming images to 100% of width
• Hero class -- #hero -- can be used as a banner
• Icon class -- #ico -- can be used as a icon or emoji, that adapts to current line text size
• Invert class -- #invert -- can invert images colors without doing it weird
  • If the image have a white background, the background-color will match with California Coast Theme background

How to use:

You must to put #class_tag on alt placeholder. You can use multiples classes.

Classes:

• #hero
• #ico
• #invert

Wikilinks

![[image_path|#class#class#class]]

Markdown Link

![#class#class#class](image_path)