diff --git a/content/demo/index.md b/content/demo/index.md
index d93f942..d9e4319 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -178,7 +178,9 @@ Available variables are:
 - `url`: URL to an image.
 - `url_min`: URL to compressed version of an image, original can be opened by clicking on the image.
 - `alt`: Alt text, same as if the text were inside square brackets in Markdown.
-- `full`: Forces image/video to be full-width.
+- `full`: Forces image to be full-width.
+- `start`: Float image to the start of paragraph and scale it down.
+- `end`: Float image to the end of paragraph and scale it down.
 - `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
 - `transparent`: Removes rounded corners and shadow, useful for transparent images.
 - `no_hover`: Removes zoom on hover.
@@ -197,14 +199,21 @@ Variables should be comma-separated and be inside the brackets.
 
 Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
 
-- `#full`: Forces image/video to be full-width.
+- `#full`: Forces image to be full-width.
+- `#start`: Float image to the start of paragraph and scale it down.
+- `#end`: Float image to the end of paragraph and scale it down.
 - `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
 - `#transparent`: Removes rounded corners and shadow, useful for transparent images.
 - `#no-hover`: Removes zoom on hover.
 
+\
 ![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
 <figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
 
+\
+![1966 Ford Mustang coupe white](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/1966_Ford_Mustang_coupe_white_003.jpg/320px-1966_Ford_Mustang_coupe_white_003.jpg#start)
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
+
 #### Video
 
 Same as images, but with a few differences: `no_hover` and `url_min` are not available.
diff --git a/sass/_media.scss b/sass/_media.scss
index 661b6e5..5f12129 100644
--- a/sass/_media.scss
+++ b/sass/_media.scss
@@ -11,6 +11,45 @@ video {
 		width: 100%;
 	}
 
+	&.start,
+	&.end,
+	&[src*="#start"],
+	&[src*="#end"] {
+		margin: 0;
+		width: 30%;
+
+		@media only screen and (max-width: 720px) {
+			float: none;
+			margin-inline-start: 0;
+			margin-inline-end: 0;
+			width: 100%;
+		}
+	}
+
+	&.start,
+	&[src*="#start"] {
+		float: left;
+		transform-origin: left;
+		margin-inline-end: 1rem;
+
+		:root[dir="rtl"] & {
+			float: right;
+			transform-origin: right;
+		}
+	}
+
+	&.end,
+	&[src*="#end"] {
+		float: right;
+		transform-origin: right;
+		margin-inline-start: 1rem;
+
+		:root[dir="rtl"] & {
+			float: left;
+			transform-origin: left;
+		}
+	}
+
 	&.pixels,
 	&[src*="#pixels"] {
 		image-rendering: pixelated;
@@ -35,6 +74,23 @@ img {
 			border-radius: 0;
 		}
 
+		&.start,
+		&.end,
+		&[src*="#start"],
+		&[src*="#end"] {
+			&:hover {
+				transform: scale(1.6);
+			}
+
+			@media only screen and (max-width: 720px) {
+				transform-origin: unset;
+
+				&:hover {
+					transform: scale(1.1);
+				}
+			}
+		}
+
 		&.transparent,
 		&[src*="#transparent"] {
 			&:hover {
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index a891b92..98f98c5 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -2,20 +2,24 @@
 	<a href="{{ url }}">
 		<img class="
 			{% if full %}full{% endif %}
+			{% if start %}start{% endif %}
+			{% if end %}end{% endif %}
 			{% if pixels %}pixels{% endif %}
 			{% if transparent %}transparent{% endif %}
 			{% if no_hover %}no-hover{% endif %}
 		"
-		{%- if alt -%}alt="{{alt}}"{%- endif -%}
+		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
 		src="{{ url_min }}" />
 	</a>
 {%- else -%}
 	<img class="
 			{% if full %}full{% endif %}
+			{% if start %}start{% endif %}
+			{% if end %}end{% endif %}
 			{% if pixels %}pixels{% endif %}
 			{% if transparent %}transparent{% endif %}
 			{% if no_hover %}no-hover{% endif %}
 		"
-		{%- if alt -%}alt="{{alt}}"{%- endif -%}
+		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
 		src="{{ url }}" />
 {%- endif -%}
diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html
index 38027c1..835e54c 100644
--- a/templates/shortcodes/video.html
+++ b/templates/shortcodes/video.html
@@ -1,7 +1,9 @@
 <video class="
 		{% if full %}full{% endif %}
+		{% if start %}start{% endif %}
+		{% if end %}end{% endif %}
 		{% if pixels %}pixels{% endif %}
 		{% if transparent %}transparent{% endif %}
   	"
-	{%- if alt -%}alt="{{alt}}"{%- endif -%}
-	controls src="{{url}}"></video>
+	{%- if alt -%}alt="{{ alt }}"{%- endif -%}
+	controls src="{{ url }}"></video>