My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across 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>However, for my specific project, I needed the box to appear without zooming the image upon hover. Through some experimentation with this Using only CSS, show div on hover over <a> code snippet, I was able to achieve this.
main.js
div {
display: none;
}
img:hover + div {
display: block;
height : 200px;
width : 300px;
}
The challenge now is dynamically adjusting the size of the image based on what we are hovering over. Is there a way to automatically create a div that is 1.5 times the dimensions of the hovered image? Any suggestions or help would be greatly appreciated.
I have attached a screenshot below for reference. https://i.sstatic.net/BD85o.png