Make the div stretch to the entire page size while keeping the existing content intact

Question

Make the div stretch to the entire page size while keeping the existing content intact

I have a concept in mind where I want a clickable circle on the top left corner that expands to full page when clicked. Using a scale, I was able to achieve this effect.

.hover.opened {
    transform: scale(1);
    transition: all 0.5s ease-out;
    overflow: hidden;
}

View example here

Now, my goal is to have the red circle's content already in place (without scaling) but not visible, and have the red circle expand to reveal the content. To better illustrate this idea, please see this image: https://i.sstatic.net/5HQd3.png The content remains at the correct scale and becomes visible only as the red circle grows.

How can this be achieved? Is it even possible? Your insights are appreciated. Thank you.

javascript html css

Answer 1

Answer №1

My approach differs slightly from yours.

HTML:

<div class="top-circle">
    <div class="inner-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS:

html, body{
    background:#555;
    padding:0;
    margin:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
.top-circle{
    top:0;
    left:0
    position:absolute;
    width:50px;
    height:50px;
    background:red;
    overflow:hidden;
    border-radius: 0 0 5000px 0;
    transition:all 0.7s ease-out;
}
.inner-text{
    margin: 50px;
    width:500px;
}

jQuery:

$(function(){

    $('.top-circle').click(function(){
        $(this).width($(window).width()+500);
        $(this).height($(window).height()+500);
    });
});

Here is the link to jsFiddle.

Answer 2

My approach differs slightly from yours.

HTML:

<div class="top-circle">
    <div class="inner-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS:

html, body{
    background:#555;
    padding:0;
    margin:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
.top-circle{
    top:0;
    left:0
    position:absolute;
    width:50px;
    height:50px;
    background:red;
    overflow:hidden;
    border-radius: 0 0 5000px 0;
    transition:all 0.7s ease-out;
}
.inner-text{
    margin: 50px;
    width:500px;
}

jQuery:

$(function(){

    $('.top-circle').click(function(){
        $(this).width($(window).width()+500);
        $(this).height($(window).height()+500);
    });
});

Here is the link to jsFiddle.

Answer 3

Answer №2

If you dabble a bit in CSS3, you have the option to take a different approach. Consider it as crafting a mask that uncovers a set content beneath.

So instead of applying the red color to the parent div responsible for drawing the circle, you can apply it to the background of the nested div.

Take a look at this modified example based on your code utilizing clip-path:

.youtube {
    -webkit-transition: scale(1);
    transition: scale(1);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-clip-path: circle(50px at left top);
    clip-path: circle(50px at left top);
    height: 100%;
}
.youtube.opened {
    -webkit-clip-path: circle(100% at center);
    clip-path: circle(100% at center);
}
.hover-content {
    background-color: red;
    width: 100%;
    height: 100%;
}

View an interactive demo here: http://jsfiddle.net/1cgonza/trn8oy8o/

Currently, this may not be the most compatible solution across all browsers, but it serves as a starting point. Using SVG images as clip-path tends to yield better results. Explore this and further references provided in these resources: https://css-tricks.com/almanac/properties/c/clip/

Answer 4

If you dabble a bit in CSS3, you have the option to take a different approach. Consider it as crafting a mask that uncovers a set content beneath.

So instead of applying the red color to the parent div responsible for drawing the circle, you can apply it to the background of the nested div.

Take a look at this modified example based on your code utilizing clip-path:

.youtube {
    -webkit-transition: scale(1);
    transition: scale(1);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-clip-path: circle(50px at left top);
    clip-path: circle(50px at left top);
    height: 100%;
}
.youtube.opened {
    -webkit-clip-path: circle(100% at center);
    clip-path: circle(100% at center);
}
.hover-content {
    background-color: red;
    width: 100%;
    height: 100%;
}

View an interactive demo here: http://jsfiddle.net/1cgonza/trn8oy8o/

Currently, this may not be the most compatible solution across all browsers, but it serves as a starting point. Using SVG images as clip-path tends to yield better results. Explore this and further references provided in these resources: https://css-tricks.com/almanac/properties/c/clip/

Answer 5

Answer №3

Are you looking for something similar to this?

Check out the Fiddle

.hover.opened {
transform: scale(1);
transition: all 0.5s ease-out;
overflow: hidden;
font-size:50px;
transform: scale(0.50);

}

View Updated fiddle here

Answer 6

Are you looking for something similar to this?

Check out the Fiddle

.hover.opened {
transform: scale(1);
transition: all 0.5s ease-out;
overflow: hidden;
font-size:50px;
transform: scale(0.50);

}

View Updated fiddle here

Answer 7

Answer №4

Are you pleased with this outcome?

var youtubePanel = document.querySelector(".youtube");

youtubePanel.addEventListener("click", function() {
youtubePanel.classList.add("opened");
});

@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
color: #BBB;
}

body {
background-color: #3D4045;
position: relative;
overflow: hidden;
}

.hover {
position: absolute;
overflow: hidden;
}

.hover.hover-top-left {
top: -1000px;
left: -1000px;
width: 2000px;
height: 2000px;
}

.hover-content {
position: relative;
    top: 66%;
    left: 69%;
    transform: scale(20);
    opacity: 0;
    font-size: 65px;
    width: 900px;
}

.youtube {
background-color: #CC181E;
border-radius: 100%;
transform: scale(0.05);
}

.hover.opened {
transform: scale(0.25);
transition: all 0.5s ease-out;
overflow: hidden;
}

.hover.opened>.hover-content {
transform:scale(1);
transition: opacity 0.5s ease-out;
opacity: 1;
}

<div class="hover hover-top-left youtube">
    <div class="hover-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Answer 8

Are you pleased with this outcome?

var youtubePanel = document.querySelector(".youtube");

youtubePanel.addEventListener("click", function() {
youtubePanel.classList.add("opened");
});

@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
color: #BBB;
}

body {
background-color: #3D4045;
position: relative;
overflow: hidden;
}

.hover {
position: absolute;
overflow: hidden;
}

.hover.hover-top-left {
top: -1000px;
left: -1000px;
width: 2000px;
height: 2000px;
}

.hover-content {
position: relative;
    top: 66%;
    left: 69%;
    transform: scale(20);
    opacity: 0;
    font-size: 65px;
    width: 900px;
}

.youtube {
background-color: #CC181E;
border-radius: 100%;
transform: scale(0.05);
}

.hover.opened {
transform: scale(0.25);
transition: all 0.5s ease-out;
overflow: hidden;
}

.hover.opened>.hover-content {
transform:scale(1);
transition: opacity 0.5s ease-out;
opacity: 1;
}

<div class="hover hover-top-left youtube">
    <div class="hover-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Make the div stretch to the entire page size while keeping the existing content intact

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Restrict the dimensions of the HTML5 Facebook comment field

Searching for a specific text within a column and displaying only the matching parts

Learning how to replace the alert function with Bootbox

What is the best way to restrict the border to just one element?

Implementing a document click event to reset timeouts using JQuery

Adjusting the header background color and inserting a logo once a specific threshold is reached

Load images in advance for hover effects on active selectors within the specified CSS file paths

Top strategy for incorporating/displaying extra form fields

Attempting to incorporate a hover effect into this piece of JavaScript code

JavaScript in Internet Explorer is showing an error message stating that it is unable to access the property '0' of an undefined or null

The conditions specified in my JavaScript if statement are seemingly being disregarded, even after I forcefully alter the variable at the conclusion of the function

The issue with line-height causing the sliding URL effect to malfunction

Trying to retrieve a CSS property using jQuery

Retrieve the CSV file following a successful POST request

Utilizing a Variable in an AngularJS <div> Tag

What causes the payload to display [object File] when files are being uploaded?

"Eliminate specific time increments like days, hours, and minutes when the timer reaches zero in a jQuery countdown

ASP.NET jQuery .load method failing to invoke controller action

The CSS method will not function properly on Safari when targeting the specific ID

The model.find operation is failing to retrieve the necessary fields from the database