Spinning a hidden overlay image with CSS

I'm facing a challenge with my mask-image in CSS. I have successfully positioned it using the mask-position property, but I can't seem to figure out how to rotate it without rotating the entire element. Can anyone provide insight on how to achieve this?

Below is the code snippet I am working with:

<body>
  <div class="water light-layer"></div>
</body>


<style lang="scss">
  .light-layer {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100rem;
    margin-top: -2.55rem;
    background: linear-gradient(180deg, rgba(53, 99, 233, 0.98) 1.17%, rgba(25, 53, 136, 0.99) 36.14%, #000D34 96.66%);
    mask-image: url("https://i.ibb.co/FzmCjLL/Jqtz.png"), linear-gradient(#fff 0 0);
    mask-repeat: no-repeat;
    mask-composite: exclude;
    mask-position: 50% 20%;
    /* Rotate here */
  }
</style>

I've attempted using normal css rotation methods, but unfortunately, that rotates the entire element rather than just the mask-image.

htmlcss

Answer №1

To achieve a rotation effect on the mask image without rotating the background, it is necessary to separate the mask image and background into different elements. Below is the revised code snippet:

<body>
    <div class="water">
        <div class="light-layer"></div>
    </div>
</body>


<style lang="scss">
    .water {
        position: absolute;
        width: 100%;
        height: 100rem;
        margin-top: -2.55rem;
        background: linear-gradient(180deg, rgba(53, 99, 233, 0.98) 1.17%, rgba(25, 53, 136, 0.99) 36.14%, #000D34 96.66%);
    }
    .light-layer {
        height: 100%;
        background: white;
        mask-image: url("https://i.ibb.co/FzmCjLL/Jqtz.png");
        mask-repeat: no-repeat;
        mask-composite: exclude;
        mask-position: 50% 20%;
        transform: rotate(30deg);
    }
</style>

Answer №2

After some experimentation with svg mask and transform properties, I was able to solve the issue on my own. It took me quite a bit of time to figure it out. Feel free to check out the code sandbox I put together:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue arises when jQuery functions fail to function properly due to data being called after the

What I am about to bring up may present a challenge, but I will do my best to explain it clearly. I have designed my website with only one main webpage (index.php). The HTML and content for various pages are saved in a PHP script. So, when a user chooses ...

phpjavascriptjqueryhtml

Modifying the maximum length of input fields in HTML, Javascript, and PHP is possible by adjusting the value through

Hi there, I'm facing an issue that should be easy for you guys to help me with. I recently discovered a security flaw while using the maxlength function in HTML. Users can easily modify the maxlength attribute by inspecting elements on the website, wh ...

javascriptphphtmlmaxlength

Struggling to properly center my login form and give it an attractive, sleek card design

Looking to create a login form similar to the one shown in this image using Bootstrap5, but struggling to do so. Is there anyone who can assist me in creating a login form like the one mentioned here? I am new to Bootstrap and CSS. Here is my current temp ...

htmlcssbootstrap-5bootstrap-cards

Transition CSS applied only to links containing images

I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example: <a href="#">no image</a> &l ...

csshyperlinkcss-transitions

Modify the Primevue Class p-accordion-header only under certain conditions

I'm currently facing a challenge with customizing the styling of the primevue component class p-accordion-header based on the status of the rendered component determined by the variantNumber. Here's a snippet of my code: <Accordion :multiple= ...

cssvue.jsclassstylesprimevue

Angular 6 - detecting clicks outside of a menu

Currently, I am working on implementing a click event to close my aside menu. I have already created an example using jQuery, but I want to achieve the same result without using jQuery and without direct access to the 'menu' variable. Can someon ...

javascriptjqueryangularhtmltypescript

An unsolicited border encompassing an image that does not resemble a CSS border or outline within the realm of Bootstrap 4

Utilizing Bootstrap4 Cards with .PNG image sources has resulted in an unexpected border appearing. It's not a border or outline issue. https://i.sstatic.net/KHgnP.png Here is the HTML <div class="row"> <div class="col-md-3"> <d ...

csstwitter-bootstrapbootstrap-4

unable to detect image input type

My dilemma lies in trying to submit a form using an image input type. The ajax request works as expected, and I receive a response from my php script. However, I encountered an issue where the image button was not changing its image upon submission. Accord ...

javascriptjqueryhtmlajaxforms

Having trouble loading image on web application

Currently, I am facing an issue while attempting to add a background image to an element within my Angular web application. Strangely enough, the relative path leading to the image seems to be causing my entire app to break. https://i.stack.imgur.com/b9qJ ...

htmlcssangularweb-applicationsrelative-path

The output generated by BeautifulSoup is consistently " b' ' "

No matter which html file I select, all I keep getting as output is b' '. from bs4 import BeautifulSoup html_doc = "C:/Users/George/Desktop/bsTest" soup = BeautifulSoup(html_doc, 'html.parser') print(soup.prettify()) Is there anyone ...

pythonhtmlbeautifulsoup

"How can I open a DOCX file in a new window using JavaScript and then close the window

When attempting to open a doc/docx file in Word from an HTML link, my goal is to prevent the opening of a new browser window. First attempt: mywin=window.open("filename.docx","viewer"); The first attempt works fine, but it results in opening a new "view ...

javascripthtmldocx

Connecting a hero image in CSS for Flask application: a step-by-step guide

Adding a hero image to my Flask app page has been challenging. Here is the directory structure of my Flask project: -static |--css_files |--my.css |--images |--img.jpg -templates |--layout.html In order to incorporate a hero image, I have includ ...

pythonhtmlcssflaskjinja2

Avoiding using the symbols < and > in JavaScript code before assigning it to InnerHtml

I am dynamically adding JavaScript code to a script tag by setting the InnerHtml property of the HtmlNode. scriptNode.InnerHtml = new_script; The issue arises when my JavaScript code contains less than < and/or greater than > characters, which dist ...

javascripthtmlhtml-agility-pack

What is the best way to remove the extra space around a Material UI checkbox?

https://i.sstatic.net/PbWJf.png The issue at hand is clear. Even when the user clicks outside of the checkbox, it will still alter the box value. The objective is to eliminate that gap. <FormControlLabel style={{ height: &quo ...

htmlcssreactjsmaterial-uifrontend

Creating a Website Optimized for Mobile Devices

As a beginner web developer, I am in the process of creating a mobile-friendly website system. Currently, I am utilizing Bootstrap for responsiveness, PHP5, MySQL, and occasionally Ajax/JQuery. Recently, I came across JQuery Mobile. While I have been usin ...

jqueryhtmlcssajaxtwitter-bootstrap

Creating a responsive layout with full-height divs within Bootstrap 4 columns

I am struggling to achieve uniform height for all my .element elements and need the image to be vertically aligned in the middle if it is too small to fill the space. I have tried numerous approaches but haven't been able to find a solution. .eleme ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

Challenges in writing PHP code

I've been diving into the world of HTML, PHP, and MYSQL with the goal of creating a voting website that uses all three languages. While my HTML and MYSQL codes are functioning perfectly, I'm encountering issues with my PHP code. It seems like the ...

phphtmlmysqldatabaseradio-button

Aligning a flex container in the middle of the horizontal axis

Is there a way to horizontally center a grid of images created with flex while still keeping the images left-aligned on each row? I want this layout to adjust dynamically based on the number of elements per row. Check out my Jsfiddle attempt here .gall ...

htmlcssflexbox

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Can someone please explain why ng-repeat-start is not functioning properly despite using the most up-to-date AngularJS version? I have included it from the CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr ...

javascriptjqueryhtmlangularjs