Upload html image

Question

I am developing a chrome extension, which, with any hover over the image, should put a window above the image, and the image should be enlarged up to 1.5 times compared to the original image. So I started working on examples and found a similar example.

.zoomin img { height: 200px; width: 200px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; transition: all 2s ease; } .zoomin img:hover { width: 300px; height: 300px; } 

 <div class="zoomin"> <img src="http://www.corelangs.com/css/box/img/zimage.png" title="All you need to know about CSS Transitions " /> </div> 

But instead, I need to create a field without scaling the image on hover. So in my exercise using this Using only CSS, show the div on the hover above <a> , I designed this.

 main.js div { display: none; } img:hover + div { display: block; height : 200px; width : 300px; } 

But the problem is that the image size must be dynamically adjusted based on the image that we are aiming.

Is there a way to make this work, when we hang up an image, it should automatically make a div, which should contain 1.5 times the size of the image. All offers. Please, help

I have provided a screenshot below for reference.

Answer 1

  img:hover div { display: block; var img = document.getElementById('imageid'); // get the image dimensions using this id var width1 = img.clientWidth; var height1 = img.clientHeight; height : width * 1.5; width : height * 1.5; } 

Answer 2

You just need to remove

+

because it selects the next next div element on img .

I think you should try:

 img:hover ~ div { //your height and width goes here } 

Answer 3

I think this is exactly what you wanted.

I do not think that you can only do this with CSS (although I would like to be wrong)

I did a for loop to add an event listener when you hover over an image in .zoomin . He then sets the image source accordingly.

 var zoominSel = document.querySelectorAll(".zoomin img"); var zoomContSel = document.querySelector(".zoomcont img") for (let i = 0; i < zoominSel.length; i++) { zoominSel[i].addEventListener("mouseover", function(event) { zoomContSel.setAttribute('src', event.target.getAttribute('src')); zoomContSel.style.width = event.target.offsetWidth + "px"; zoomContSel.style.height = event.target.offsetHeight + "px"; zoomContSel.parentElement.style.top = event.target.offsetTop + "px"; zoomContSel.parentElement.style.left = (event.target.offsetLeft + event.target.offsetWidth + 2) + "px"; }); zoominSel[i].addEventListener("mouseout", function(event) { zoomContSel.setAttribute('src', ''); }); } 

 body { margin: 0; } .zoomin img { max-width: 200px; } .zoomcont img[src=""] { display: none; } .zoomcont { z-index: 1000; position: absolute; transform: scale(1.5); transform-origin: 0 0; } 

 <div class="zoomin"> <img src="http://www.corelangs.com/css/box/img/zimage.png" /> </div> <div class="zoomin"> <img src="http://usabilitygeek.com/wp-content/uploads/2013/07/free-fonts-for-commercial-personal-use.jpg" /> </div> <div class="zoomcont"> <img src="" /> </div> 

Hope you find this helpful.