Essentially I have a button on my page, and I want a div with content (videos, text, etc.) inside of it. My goal is to create the div and when the button is clicked, it will scale up from the center of the button and cover the current content on the screen. I can easily add a border-radius css to make it start as a circle but then turn into the rectangle that engulfs the window.
It's a bit of a complicated request I know, but I can't find any tutorials online for something even remotely similar to this concept. I originally found this idea on the following site: http://christophe-kerebel.com/ if that helps you get an idea of what I am trying to make.
Thanks in advance! (:
For others who may be confused, when you go to the site you need to click one of the links on the bottom to see the expanding circle OP is referring to. Not sure exactly what you are asking for, but I think the key to what you are asking are css transitions.
Set the size of the div and a transition property through css
#myDiv{
width: 10px;
transition: width 5s ease;
}
With the transition property set, once the specified 'width' transition property changes, it will slowly transition to the new size using the specified time interval, in this example 5 seconds. You can toggle the width using javascript, something like document.getElementById("myDiv").style.width = "500px"; Thats most likely triggered by the button click.
<button onClick="document.getElementById('myDiv').style.width = '500px' ">Expand</button>
Its also worth noting that you can add the transition effect to virtually any css style, not just width and height, but color, position, etc