github-starred/awesome-obsidian
2
0
Fork 0
mirror of https://github.com/kmaasrud/awesome-obsidian.git synced 2026-07-17 10:52:05 -05:00
Code Issues 683 Packages Projects Releases Wiki Activity

[GH-ISSUE #68] Enlarge on hover CSS #1074

New Issue
Open
opened 2026-06-08 09:05:56 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-06-08 09:05:56 -05:00
Owner
Copy Link

Originally created by @SteveJohnSteele on GitHub (Jan 18, 2024).
Original GitHub issue: https://github.com/kmaasrud/awesome-obsidian/issues/68

/* 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). Original GitHub issue: https://github.com/kmaasrud/awesome-obsidian/issues/68 ``` /* 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.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
help wanted
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/awesome-obsidian#1074
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?