CODEWITHSUNDEEP
csshtmlhovermargin
Alpha Turtle
Alpha Turtle

Reputation: 23

How to remove margin attribute when hover

Let's say I have this code:

<div id="block">asd</div>

And I want to make it move from the top left corner to the bottom right when I hover (or when I click it, it doesn't matter)

#block{ border: 1px solid black;
        margin-top: 10px;
        margin-left: 10px;}
#block:hover{
        margin-right:10px;
        margin-bottom:10px;

}

But it doesn't work. Somehow I have to remove the margin-top and margin-left attributes when hovering but I don't know how.

Please do it in css if it can be done!

Upvotes: 0

Views: 2030

Answers (5)

A. Meshu
A. Meshu

Reputation: 4148

maybe something like this:

Css:

#block { 
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
#block:hover {top: 90vh; left: 90vw;}

Html:

<a href="#" id="block"><div>try to catch me</div></a>

Upvotes: 0

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

Instead of using margin, use the transform property.

To achieve this you would require another element that serves as a wrapper.

When hovering the wrapper do the following:

Move the wrapper iteself to the right bottom corner using:

transform: translate(calc(100% - [<blockWidth>]), calc(100% - [<blockHeight>]));

Then move the .block element in the opposite direction with:

transform: translate(calc(-100% - [<blockWidth>]), calc(-100% - [<blockHeight>]));

Code Snippet:

body {
  margin: 0;
  overflow: hidden;
}
.block-container {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 3s;
}
.block-container:hover {
  transform: translate(calc(100% - 2em), calc(100% - 2em));
}
.block {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: darkorange;
  transition: inherit;
}
.block-container:hover #block {
  transform: translate(calc(-100% - 2em), calc(-100% - 2em));
}
<div class="block-container">
  <div class="block"></div>
</div>

Upvotes: 0

NicheQuiche
NicheQuiche

Reputation: 82

Just put the margin "all in one".

So it will be:

margin: [top right bottom left]

In your case:

#block{
      margin: 10px 0px 0px 10px;
}

#block:hover{
      margin: 0px 10px 10px 0px;
}

You can also combine margin like:

margin: [top+bottom] [left+right];

Upvotes: 0

ExplodingPedro12
ExplodingPedro12

Reputation: 21

I guess it's easy You have the:

#block{ border: 1px solid black;
        margin-top: 10px;
        margin-left: 10px;}

So, in the hover, you have to cancel the margin-top and margin-left (change it to zero), and then apply the margin you want!

#block:hover{
        margin-right:10px;
        margin-bottom:10px;
        margin-top: 0;
        margin-left: 0;
}

Like that, the margin you had will disappear on hover!

in the #block:hover css, just put this code there down, and everything should work fine.

#block:hover{
     margin-right:10px;
     margin-bottom:10px;
     margin-top: 0;
     margin-left: 0;

}

Upvotes: 0

muratkh
muratkh

Reputation: 123

#block:hover{
        margin-top: 0px;
        margin-left: 0px;
        margin-right:10px;
        margin-bottom:10px;
}

if you wanna do it in don't repeat yourself philosophy

#block:hover{
            margin-top: 0px;
            margin-left: 0px;
    }

Upvotes: 1

Related Questions