Pop out image html

Question

Я разрабатываю расширение хром, которое при любом наведении на изображение должно выставлять окно над изображением, а изображение должно быть увеличено до 1,5 раз по сравнению с исходным изображением. Итак, я начал работать над примерами и нашел аналогичный пример.

.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>

Но вместо этого мне нужно создать окно без масштабирования изображений при наведении курсора мыши. Таким образом, в моем упражнении с использованием этого Using only CSS, show div on hover over <a> я разработал это.

main.js 

div { 
    display: none; 
} 

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

Но проблема в том, что размер изображения должен быть динамически настроен на основе изображения, которое мы наводим.

Есть ли способ, чтобы сделать эту работу, когда курсор мыши над изображением оно должно автоматически сделать DIV, который должен держать в 1,5 раза размеры image.Any suggestions.?Please помочь

Я включил скриншот ниже для справки.

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

Вам нужно просто удалить

+

, потому что он выбирает следующий непосредственный div элемент img.

Я думаю, вы должны попробовать:

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

Answer 3

Я думаю, что это такая вещь, что вы хотели.

Я не думаю, что вы можете сделать это только с помощью CSS (хотя хотелось бы быть неправильно)

Я сделал для цикла, чтобы добавить прослушиватель событий в течение при наведении указателя мыши и выключения изображения в .zoomin. Затем он устанавливает источник изображения соответственно.

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>

Надеюсь, вы найдете это полезным.