Pop-out görüntü html

Question

Herhangi bir resmin üzerine bir resmin üzerine gelmesi ve resmin orijinal görüntünün 1,5 katına yakınlaştırılması gereken bir krom uzatma geliştiriyorum. Bu yüzden örnekler üzerinde çalışmaya başladım ve buna benzer bir örnek buldum.

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

Ama bunun yerine i vurgulu görüntüyü yakınlaştırma olmadan kutusu oluşturmak gerekir. Bu yüzden benim egzersizimde bu Using only CSS, show div on hover over <a> kullanarak bunu geliştirdim.

main.js 

div { 
    display: none; 
} 

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

Ama sorun resmin boyutu dinamik olarak biz çırpınırken görüntüye göre ayarlanabilir gerektiğidir.

Ben ekran görüntüsü dahil ettik

1.5 katı image.Any suggestions.?Please boyutları yardımcı biz otomatik tutmak gerekir bir div yapmalıdır bir resmin üzerine getirdiğinizde bu işi yapmak için bir yol var mı referans için aşağıda.

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

Bunu img hemen sonraki div eleman seçer çünkü sadece

+

kaldırmak gerekir.

Sana denemek gerek:

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

Answer 3

istediğinin bu türden bir şey olduğunu düşünüyorum.

Ben sadece CSS ile yapabilirsiniz sanmıyorum (yanlış olmak isterdim gerçi)

Ben ne zaman fareyi üzerine ve bir görüntü kapalı bir olay dinleyicisi eklemek için bir for döngüsü yaptık .zoomin. Ardından görüntü kaynağını buna göre ayarlar.

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>

Bunu faydalı buldunuz Umut.