CODEWITHSUNDEEP
css
Dendenzilla
Dendenzilla

Reputation: 610

Keep a div from moving when resized

I am trying to position a div in a corner of my screen so that I can resize it to cover the screen. Problem is, when I resize it the div moves as you can see in the snippet below. I tried to apply the effect on an pseudo-element but it did not help. Any idea how I can resize an item without it moving ?

Thank you for your help.

$('button').click(function(){
  $(this).closest('div').find('.cover').toggleClass('active');
  console.log("test");
})
.main{
  display:flex;
  justify-content:space-around;
}
.item {
  width:350px;
  height:350px;
  background-color:teal;
  position:relative;
  overflow:hidden;
  }
 .item .cover {
    transition:all .5s linear;
    width:20px;
    height:20px;
    background-color:orange;
    position:absolute;
    inset:-10px -10px auto auto;
    border-radius:50%;
 }
 .item.no-pseudo .cover.active {
        width:200%;
        height:200%;
  }
}
button{
  margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">  
  <div class="container">
    <div class="item no-pseudo">
      <div class="cover"></div>
    </div>
    <button class="no-pseudo">Click to toggle effect on element</button>
  </div>
</div>

Upvotes: 0

Views: 100

Answers (2)

Mehran Zahiroddini
Mehran Zahiroddini

Reputation: 61

Use scale instead of width and height.

$('button').click(function(){
  $(this).closest('div').find('.cover').toggleClass('active');
  console.log("test");
})
.main{
  display:flex;
  justify-content:space-around;
}
.item {
  width:350px;
  height:350px;
  background-color:teal;
  position:relative;
  overflow:hidden;
  }
 .item .cover {
    transition:all .5s linear;
    width:20px;
    height:20px;
    background-color:orange;
    position:absolute;
 
    border-radius:50%;
 }
 .item.no-pseudo .cover.active {
     transform:scale(20);
  }
}
button{
  margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">  
  <div class="container">
    <div class="item no-pseudo">
      <div class="cover"></div>
    </div>
    <button class="no-pseudo">Click to toggle effect on element</button>
  </div>
</div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105863

You can use transform:scale(x) instead, by default, transform-origin is done from the center of the element.

$('button').click(function(){
  $(this).closest('div').find('.cover').toggleClass('active');
  console.log("test");
})
.main{
  display:flex;
  justify-content:space-around;
}
.item {
  width:350px;
  height:350px;
  background-color:teal;
  position:relative;
  overflow:hidden;
  }
 .item .cover {
    transition:all .5s linear;
    width:20px;
    height:20px;
    background-color:orange;
    position:absolute;
    inset:-10px -10px auto auto;
    border-radius:50%;
 }
 .item.no-pseudo .cover.active {
        transform:scale(50);
  }
}
button{
  margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">  
  <div class="container">
    <div class="item no-pseudo">
      <div class="cover"></div>
    </div>
    <button class="no-pseudo">Click to toggle effect on element</button>
  </div>
</div>

Upvotes: 1

Related Questions