changes in size in relation to the position of the parent element

Question

changes in size in relation to the position of the parent element

Utilizing the transition:scale(1.2) property to conceal a div positioned in the lower left corner of the viewport.

Currently, the scaling effect originates from the center as intended:

View 'CURRENTLY' on Fiddle

I aim to scale it as if the div occupied the entire screen:

View 'DESIRED' on Fiddle

The desired effect is achieved by scaling the entire body. However, rather than introducing an additional parent element, I am curious to know if there is a different approach to instruct CSS on the direction of scaling.

How can I implement transition:scale(1.2) similar to what's shown in 'DESIRED' without employing a full-size div?

css css-transitions

Answer 1

Answer №1

To adjust the transform-origin, you can try the following:

Here is an example that may suit your needs:

-webkit-transform-origin: 120% -40%;

Check out the demo here

Updated CSS:

#clock {
    position:fixed;
    bottom:8%;
    left:7%;
    color:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    transform-origin: 120% -40%;
    -webkit-transform-origin: 120% -40%;
}

body {
    overflow:hidden;
}

body:hover #clock {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    opacity:0;
}

Edit: Since your clock uses percentage-based positioning for left and bottom, this adjustment might give you a closer effect. By changing back to a center-based transform origin and transitioning left/bottom towards the corner, you can achieve a scaling effect from the upper right corner of the parent element.

See Demo Fiddle 2 for reference

Modified CSS:

#clock {
    position:fixed;
    bottom:8%;
    left:7%;
    color:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    transform-origin: center center;
    -webkit-transform-origin: center center;
}

body {
    overflow:hidden;
}
body:hover #clock {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    bottom: 1%;
    left: 0%;
    opacity:0;
}

Answer 2

To adjust the transform-origin, you can try the following:

Here is an example that may suit your needs:

-webkit-transform-origin: 120% -40%;

Check out the demo here

Updated CSS:

#clock {
    position:fixed;
    bottom:8%;
    left:7%;
    color:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    transform-origin: 120% -40%;
    -webkit-transform-origin: 120% -40%;
}

body {
    overflow:hidden;
}

body:hover #clock {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    opacity:0;
}

Edit: Since your clock uses percentage-based positioning for left and bottom, this adjustment might give you a closer effect. By changing back to a center-based transform origin and transitioning left/bottom towards the corner, you can achieve a scaling effect from the upper right corner of the parent element.

See Demo Fiddle 2 for reference

Modified CSS:

#clock {
    position:fixed;
    bottom:8%;
    left:7%;
    color:#fff;
    transition:all .8s;
    -webkit-transition:all .8s;
    transform-origin: center center;
    -webkit-transform-origin: center center;
}

body {
    overflow:hidden;
}
body:hover #clock {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    bottom: 1%;
    left: 0%;
    opacity:0;
}

changes in size in relation to the position of the parent element

Answer №1

Similar questions

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Problem arises with table nth-child selector following the addition of grid-gap

Resizable icon next to inline element caused width adjustment

When you hover over a Wordpress page, the entire text on the page will be underlined

Spring Boot application on Prime Faces is not displaying CSS after deployment to Heroku

List on the Left Side with Scroll Capability

Issue with transitioning from Bootstrap 2 to Bootstrap 3 navbar

Troubleshooting material design CSS problem in AngularJS routing module

What is the best way to design lists that adjust to different screen sizes by incorporating multiple columns within the available width?

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

Show a pop-up when hovering over each row of a Material UI table and address the problem with the box

Dealing with Sideways Overflow Using slideDown() and slideUp()

The Gulp task is failing to generate the CSS file

Curved edges, Layering, Content overflow restriction

CSS Background Color Not Displaying Correctly

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

Flexbox parent div experiencing overflow due to horizontal margins protruding beyond the boundaries

What is the best way to eliminate borders on a span element so they collapse seamlessly?

Can CSS be used for creating unique color combinations?