From 4bbec91014b4ebc082eb4bfab7952a73c94d7b8b Mon Sep 17 00:00:00 2001
From: Navan Chauhan <navanchauhan@gmail.com>
Date: Mon, 26 Feb 2024 12:09:08 -0700
Subject: add new post

---
 ...ntrol-element-under-another-element-html-css.md |  35 +++++++++++++++++++++
 .../assets/underlying/video-under-element.jpg      | Bin 0 -> 155017 bytes
 ...trol-element-under-another-element-html-css.png | Bin 0 -> 22985 bytes
 3 files changed, 35 insertions(+)
 create mode 100644 Content/posts/2024-02-26-control-element-under-another-element-html-css.md
 create mode 100644 Resources/assets/underlying/video-under-element.jpg
 create mode 100644 Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png

diff --git a/Content/posts/2024-02-26-control-element-under-another-element-html-css.md b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
new file mode 100644
index 0000000..1c253fe
--- /dev/null
+++ b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
@@ -0,0 +1,35 @@
+---
+date: 2024-02-26 11:57
+description: With CSS you can disable any interactions with an element and directly control the underlying element
+tags: HTML, CSS
+draft: false
+---
+
+# Interacting with underlying element in HTML
+
+I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.
+
+```html
+<div class="row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900">
+    <div class="content flex flex-wrap content-center justify-center">
+        <img src="iphone-12-white.png" class="h-[60vh] z-10 absolute">
+        <!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">-->
+        <video src="screenrec.mp4" class="h-[57vh] mt-4 mr-1 rounded-[2rem]" controls muted autoplay></video>
+    </div>
+</div>
+```
+
+![Video Under a Transparent Image](/assets/underlying/video-under-element.jpg)
+
+Turns out, you can disable pointer events!
+
+In Tailwind, it is as simple as adding `pointer-events-none` to the bezel screen.
+
+In CSS, this can be done by:
+
+```css
+.className {
+    pointer-events: none
+}
+```
+
diff --git a/Resources/assets/underlying/video-under-element.jpg b/Resources/assets/underlying/video-under-element.jpg
new file mode 100644
index 0000000..96afed2
Binary files /dev/null and b/Resources/assets/underlying/video-under-element.jpg differ
diff --git a/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
new file mode 100644
index 0000000..2817224
Binary files /dev/null and b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png differ
-- 
cgit v1.2.3