I am experimenting with creating a skewed overlay on a video playing in the background at full width.
Currently, the skew overlay is functioning perfectly. What if I want it to appear in the bottom-right corner instead of the top-left corner? Would I need to adjust the skew degree?
Below is my code:
Updated CSS code will go here Updated HTML code will go here To view the working fiddle, click here.
Based on your feedback from the query:
I am looking for the overlay to be positioned exactly like it is at the top-left, but this time at the bottom-right corner
To achieve this, you simply need to adjust the left property in the CSS of .skew-overlay from -400px to 400px:
.skew-overlay {
left: 400px;
/* other styling here... */
}
html,
body {
margin: 0;
padding: 0;
color: #fff;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/container.jpg') no-repeat;
background-size: cover;
-webkit-transition: 1s opacity;
transition: 1s opacity;
}
h1 {
font-size: 2.5rem;
padding: 5% 0 0 12%;
letter-spacing: .1rem;
}
#container {
height: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.overlay {
z-index: 1;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.skew-overlay {
z-index: 99;
position: absolute;
top: 0;
bottom: 0;
left: 400px;
width: 600px;
background: #fff;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
.content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 700px;
padding: 0 20px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
font-size: 1rem;
font-weight: 400;
}<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div id="container">
<div class="overlay">
<div class="skew-overlay"></div>
<div class="content">
<span class="text">Wise busy past both park when an ye no. Nay likely her length sooner thrown sex lively income. The expense windows adapted sir. Wrong widen drawn ample eat off doors money. Offending belonging promotion provision an be oh consulted ourselves it. Blessing welcomed ladyship she met humoured sir breeding her. Six curiosity day assurance bed necessary. </br>Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially reasonable off one. Wonder bed elinor family secure met. It want gave west into high no in. Depend repair met before man admire see and. An he observe be it covered delight hastily message. Margaret no ladyship endeavor ye to settling. </span>
</div>
</div>
</div>I found a solution by updating the code snippet on your Fiddle:
.skew-overlay {
z-index: 99;
position: absolute;
bottom: 0;
right: -200px;
width: 200px;
height: 200px;
background: #ff0;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
I have a JavaScript website that I need to rebuild with some changes I made. In order to build the application, I was instructed to run this command from the source files directory: ng build –env=prod However, when I try to do so, I keep encountering t ...
When using ReactJS to make a fetch request to an API, the JSON body response includes the following: { "place": <a href=\"http:\/\/place.com\/ search?q=%23MILKYDOG\" target=\"_blank\">#milkydog<&b ...
My background is in Groovy, which has similar syntax to JavaScript. In Groovy, I can easily copy values from one map to another like this: def myMap1 = {}; def myMap2 = {}; myMap1["key1"] = "value1"; myMap1["key2"] = "value2"; myMap1["key3"] = "value3"; ...
I developed a WCF web service in ASP.NET 4.5 using VS2012 that delivers a JSON response successfully via the built-in webservice client. The endpoints are correctly configured in the Web.config file. However, I encountered an issue on the client side with ...
I am facing a challenge that I need help with. For a school project, I have to create 8 pages of HTML, each with a template and a menu. The menu consists of tabs that are supposed to link to separate pages when clicked. However, the issue is that when I cl ...
I am in the process of implementing a basic "remember me" feature in my login.php file: <?php session_start(); if(isset($_SESSION["comp"])){ header("location view.php");//to redirect to the view page if already logged retur ...
I recently stumbled upon this simple plain JavaScript AJAX upload code (apparently jQuery's $.post doesn't work properly with HTML5 for some reason), /* If you want to upload only a file along with arbitrary data that is not in the fo ...
I have a field where I can enter numbers <input type="text" class="form-control" id="validationTooltip01" v-model="verse.number" required> After saving the number in the database, I would like it to automatically increment. For example: If I inpu ...
I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have: a:not([href*="domain"])::after { content: url(data:image/svg+ ...
I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...
I'm in the process of developing an application that retrieves a JSON response from an API call using SONARQUBE. With node js, how can I extract the value of duplicated_lines from the following JSON object? I attempted the code below but it always r ...
The alignment of the images and file labels needs adjustment to ensure they all appear on the same line. Below is the code snippet that I have tried: HTML: <div> <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')} ...
Is there a method to determine if the change in valueChanges for a FormControl was initiated by the dom or the component itself? I have a scenario where I need to execute stuff() when the user modifies the value, but I want to avoid executing it if the v ...
Is there a way to use multiple CSS classes with the MUI 5 SX prop? I've defined a base class for my Box components and now I want to add a second class specifically for styling the text inside the Box. When I try to apply both classes like sx={styles. ...
I have developed an innovative Expense Tracker Application, where users can conveniently manage their expenses through a User Collection containing fields such as Name, Amount, Expenses Array, Incomes Array, and more. The application's database is p ...
A React child cannot be an object. If you intended to render a collection of children, utilize an array Encountering the error mentioned above has left me puzzled regarding its restrictions. Below is the code where I am facing this issue. It includes an o ...
Hello, everyone! I'm encountering an issue with a jQuery AJAX method in a cshtml file. The method is responsible for fetching data from the server and displaying it in a modal dialog box. Here is the code snippet: $("#flowButton").click(function () ...
I'm having trouble deploying a next.js + mongodb project to Vercel. Every time I try, I encounter this error: Error occurred prerendering page "/products". Read more: https://nextjs.org/docs/messages/prerender-error SyntaxError: Unexpected t ...
Even the FancyApps page itself contains the error mentioned below. If you visit using Internet Explorer 9, for example, follow these steps: Go to Internet Options > Advanced > Disable script debugging (Internet Explorer). Then click on the YouTube ( ...
Here is the code I'm working with: http://jsfiddle.net/zyR9K/4/ var Enemies = { x: 25, y: 25, width: 20, height: 30, speed: 0.5, color: "#000", draw: function () { canvas.fillStyle = ...