From 2ede57d571e382f5aae167bd2a059a12fa1108ea Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Mon, 26 Feb 2024 12:09:08 -0700 Subject: add new post --- ...rol-element-under-another-element-html-css.html | 88 ++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 docs/posts/2024-02-26-control-element-under-another-element-html-css.html (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') diff --git a/docs/posts/2024-02-26-control-element-under-another-element-html-css.html b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html new file mode 100644 index 0000000..8b72ac5 --- /dev/null +++ b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html @@ -0,0 +1,88 @@ + + + + + + + + + Interacting with underlying element in HTML + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +

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.

+ +
+
<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

+ +

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:

+ +
+
.className {
+    pointer-events: none
+}
+
+
+ +
If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.
+ +
+ +
+
+ + + + + \ No newline at end of file -- cgit v1.2.3