From 13856289d907772514c7a450c874d551e4182f3a Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 18 Aug 2020 15:07:32 +0300
Subject: [PATCH] Add text overaly snippet

---
 snippets/text-backdrop-overlay.md | 32 +++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 snippets/text-backdrop-overlay.md

diff --git a/snippets/text-backdrop-overlay.md b/snippets/text-backdrop-overlay.md
new file mode 100644
index 000000000..8c0de7013
--- /dev/null
+++ b/snippets/text-backdrop-overlay.md
@@ -0,0 +1,32 @@
+---
+title: Image text overlay
+tags: visual,beginner
+---
+
+Display a text on top of an image using an overlay.
+
+- Use `backdrop-filter` to apply a `blur(14px)` and `brightness(80%)` effect to make text readable regardless of background image and color.
+
+```html
+<div>
+  <h3 class="text-overlay">Hello, World</h3>
+  <img src="https://picsum.photos/id/1050/1200/800">
+</div>
+```
+
+```css
+div {
+  position: relative;
+}
+
+.text-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 1rem;
+  font-size: 2rem;
+  font-weight: 300;
+  color: white;
+  backdrop-filter: blur(14px) brightness(80%);
+}
+```