Expand div from center

Question

I'm trying to make a circle div expandable like google material design but something does not work. I want it to expand and fill the page (from top 0 and right 0) and stay in position. But when width and height increase, the center of div moves.

I want the same effect on search button on this template (ThemeForest): https://html.nkdev.info/_con/dashboard.html

Here my code :

 $('.expand').on('click', function() { $('.to-expand').css({ 'width': '300px', 'height': '300px' }) })

 html, body { width: 100%; height: 100%; } .to-expand { position: absolute; border-radius: 100%; width: 20px; height: 20px; top: 0; background-color: red; right: 0; transition: .5s; }

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <a class="expand">expand</a> <div class="to-expand"></div>

Answer 1

Maybe you are looking from scale:

 $('.expand').on('click', function() { $('.to-expand').addClass('scale'); })

 html, body { width: 100%; height: 100%; } .to-expand { position: absolute; border-radius: 100%; width: 20px; height: 20px; top: 0; background-color: red; right: 0; transition: .5s; } .scale { transform:scale(15); }

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <a class="expand">expand</a> <div class="to-expand"></div>

Answer 2

Use transform: scale(15) instead of manipulating width and height .

 $('.expand').on('click', function() { $('.to-expand').css({ "transform": "scale(15)" }) })

 html, body { width: 100%; height: 100%; } .to-expand { position: absolute; border-radius: 100%; width: 20px; height: 20px; top: 0; background-color: red; right: 0; transition: .5s; transform-origin: center center; }

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <a class="expand">expand</a> <div class="to-expand"></div>

Answer 3

 $('.expand').on('click', function() { $('.to-expand').addClass('expanded'); })

 html, body { width: 100%; height: 100%; } .to-expand { position: absolute; border-radius: 100%; width: 20px; height: 20px; top: 0; background-color: red; right: 0; transition: .5s; } .expanded{ top: -100vmax; right: -100vmax; width: 250vmax; height: 250vmax; }

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <a class="expand">expand</a> <div class="to-expand"></div>