ポップアウト画像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>私はこれを開発しました。

ただし、画像のサイズは、ホバリングしている画像に基づいて動的に調整する必要があります。

私はスクリーンショットが含まれている

1.5倍image.Any suggestions.?Pleaseの寸法が助け我々はそれが自動的に保持しなければならないのdivをしなければならない画像にカーソルを合わせると、この作品を作るための方法があります参照のために以下をご覧ください。

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

あなたはそれがimgにすぐに次のdiv要素を選択するのでちょうど

+

を削除する必要があります。

私はあなたが試す必要がありますね：

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>

あなたは、これは参考願っています。