Wysuwany obraz html

Question

Opracowuję rozszerzenie chrome, które po najechaniu kursorem na obrazek powinno wyskoczyć z okna nad obrazem, a obraz powinien być powiększony do 1,5 raza obrazu oryginalnego. Zacząłem więc pracę nad przykładami i znalazłem podobny przykład.

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

ale zamiast tego trzeba utworzyć pole bez powiększania obrazu przy aktywowaniu. Tak więc w moim ćwiczeniu z wykorzystaniem tego Using only CSS, show div on hover over <a> opracowałem to.

main.js 

div { 
    display: none; 
} 

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

Problem polega na tym, że rozmiar obrazu powinien być dynamicznie dostosowywany w zależności od obrazu, na którym się znajdujemy.

Czy istnieje sposób, aby to robić, gdy unoszą się nad obrazem powinien automatycznie dokonać div, który powinien trzymać 1,5 razy wymiary image.Any suggestions.?Please pomóc

mam włączone zrzut ekranu poniżej dla odniesienia.

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

Trzeba tylko usunąć

+

ponieważ wybiera natychmiastowe następny div elementu do img.

Chyba powinieneś spróbować:

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

Answer 3

myślę, że to jest coś takiego chciałeś.

Nie sądzę, można to zrobić tylko z CSS (choć chciałbym się mylić)

Zrobiłem pętli for, aby dodać detektor zdarzeń na za po myszkę i wyłączania obrazu w .zoomin. Następnie ustawia źródło obrazu odpowiednio.

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>

Nadzieję, że to pomocne.