diff --git a/index.html b/index.html index a7ee3098..196f7284 100644 --- a/index.html +++ b/index.html @@ -95,6 +95,9 @@ display: inline; padding-right: 10px; } + .imgItemInfo { + opacity: 0.5; + } @@ -303,6 +306,9 @@ async function doMakeImage(reqBody) { img.height = parseInt(reqBody.height) img.src = imgBody + let imgItemInfo = document.createElement('span') + imgItemInfo.className = 'imgItemInfo' + let imgSeedLabel = document.createElement('span') imgSeedLabel.className = 'imgSeedLabel' imgSeedLabel.innerHTML = 'Seed: ' + seed @@ -316,9 +322,10 @@ async function doMakeImage(reqBody) { imgSaveBtn.innerHTML = 'Download' imgItem.appendChild(img) - imgItem.appendChild(imgSeedLabel) - imgItem.appendChild(imgUseBtn) - imgItem.appendChild(imgSaveBtn) + imgItem.appendChild(imgItemInfo) + imgItemInfo.appendChild(imgSeedLabel) + imgItemInfo.appendChild(imgUseBtn) + imgItemInfo.appendChild(imgSaveBtn) imagesContainer.appendChild(imgItem) imgUseBtn.addEventListener('click', function() { @@ -341,6 +348,14 @@ async function doMakeImage(reqBody) { imgDownload.href = imgBody imgDownload.click() }) + + imgItem.addEventListener('mouseenter', function() { + imgItemInfo.style.opacity = 1 + }) + + imgItem.addEventListener('mouseleave', function() { + imgItemInfo.style.opacity = 0.5 + }) } }