Enlarge on hover CSS #21

Open
opened 2025-11-06 09:17:32 -06:00 by GiteaMirror · 0 comments
Owner

Originally created by @SteveJohnSteele on GitHub (Jan 18, 2024).

/* Apply styles to images with alt text containing "enlarge" */
.markdown-preview-view img[alt*="enlarge"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.25s ease;
}

/* Hover effect on images with alt text containing "enlarge" */
.markdown-preview-view img[alt*="enlarge"]:hover {
  -webkit-transform: scale(1.8); /* experiment with values */
  transform: scale(2);
}

It only targets links with the "enlarge" tag.

How to use:
![enlarge | 100](https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg)
or
![some text enlarge more text | 100](https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg)

This allows the user to set a default size and still have the enlarged hover effect.

Originally created by @SteveJohnSteele on GitHub (Jan 18, 2024). ``` /* Apply styles to images with alt text containing "enlarge" */ .markdown-preview-view img[alt*="enlarge"] { display: block; margin-left: auto; margin-right: auto; transition: transform 0.25s ease; } /* Hover effect on images with alt text containing "enlarge" */ .markdown-preview-view img[alt*="enlarge"]:hover { -webkit-transform: scale(1.8); /* experiment with values */ transform: scale(2); } ``` It only targets links with the "enlarge" tag. How to use: `![enlarge | 100](https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg)` or `![some text enlarge more text | 100](https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg)` This allows the user to set a default size and still have the enlarged hover effect.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/awesome-obsidian#21