Shift the center of the box to set box in the center
Class: .shift-t
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-t "></div>
</div>
Class: .shift-r
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-r "></div>
</div>
Class: .shift-b
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-b "></div>
</div>
Class: .shift-l
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-l "></div>
</div>
Class: .shift-tl
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-tl "></div>
</div>
Class: .shift-tr
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-tr "></div>
</div>
Class: .shift-bl
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-bl "></div>
</div>
Class: .shift-br
<div class="bg-gray-lighter w-10 h-10">
<div class="w-10 h-10 bg-blue-50 shift-br "></div>
</div>
You can use .hover-shift-{direction}-{pixels}
to shift an element. Here {direction} can be t,r,b or l for top, right, bottom and left respectively
.shift-{direction}-{pixels}
will also work if you don't want to use with hover
Example | class |
.hover-shift-t-1 |
|
.hover-shift-t-2 |
|
.hover-shift-t-3 |
|
.hover-shift-t-4 |
|
.hover-shift-t-6 |
|
.hover-shift-t-8 |
|
.hover-shift-t-12 |
|
.hover-shift-t-16 |