Pop out image html

Question

I am developing a chrome extension which on any hover over an image it should popout a box over the image and the image should be zoomed to 1.5 times the original image. So I started working on examples and found a similar example like this.

.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 box without zooming the image on hover. So in my exercise using this Using only CSS, show div on hover over <a> i have developed this.

main.js

div {
    display: none;
}

img:hover + div {
    display: block;
 height : 200px;
    width : 300px;
}

But the problem is that the size of the image should be dynamically adjusted based on the image we are hovering.

Is there a way to make this work when we hover over an image it should automatically make a div which should hold 1.5 times the dimensions of the image.Any suggestions.?Please help

I have included the 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 need to just remove

+

because it selects immediate next div element to img.

I guess you should try:

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

Answer 3

I think this is the sort of thing you wanted.

I don't think you can do this with CSS only (though would love to be wrong)

I've done a for loop to add an event listener on for when you mouse over and off an image in .zoomin. Then it 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.