How to Get position of a div or an image in the div (top and left position) and use those values in CSS?

Question

I have a website which is dynamic and using bootstrap. I want to create an animation into it where the dynamic thumbnails in div class="col-md-4" on clicking zoom from there position to 100% at the center of the container.

I am to create an on click effect to zoom the image but not from the position of the div, but from the center of the page. I am trying positioning of the image.

x = document.getElementById("Image")

t = x.top;
l = x.left;

function hello() {
x.style.top = x.top + "px";
x.style.left = x.left + "px";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <img id="Image" src="abc.jpg">
  <h2>ABC</h2>
</div>

But no luck. If anyone can help me out. Please do. Thanks.

score 1 · Answer 1 · answered Mar 18 '19 at 19:26

Try using getBoundingClientRect

x.getBoundingClientRect() it will give you the absolute position of the element to the document.

You can get the viewport's height and width using this StackOverflow

From there you can get the proper offset you're looking for.

How to Get position of a div or an image in the div (top and left position) and use those values in CSS?

1 Answers1