forked from extern/easydiffusion
Reduce opacity of the labels over the image until the mouse moves over it
This commit is contained in:
parent
35dc13ffcf
commit
7c60189f29
21
index.html
21
index.html
@ -95,6 +95,9 @@
|
|||||||
display: inline;
|
display: inline;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
.imgItemInfo {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</html>
|
</html>
|
||||||
<body>
|
<body>
|
||||||
@ -303,6 +306,9 @@ async function doMakeImage(reqBody) {
|
|||||||
img.height = parseInt(reqBody.height)
|
img.height = parseInt(reqBody.height)
|
||||||
img.src = imgBody
|
img.src = imgBody
|
||||||
|
|
||||||
|
let imgItemInfo = document.createElement('span')
|
||||||
|
imgItemInfo.className = 'imgItemInfo'
|
||||||
|
|
||||||
let imgSeedLabel = document.createElement('span')
|
let imgSeedLabel = document.createElement('span')
|
||||||
imgSeedLabel.className = 'imgSeedLabel'
|
imgSeedLabel.className = 'imgSeedLabel'
|
||||||
imgSeedLabel.innerHTML = 'Seed: ' + seed
|
imgSeedLabel.innerHTML = 'Seed: ' + seed
|
||||||
@ -316,9 +322,10 @@ async function doMakeImage(reqBody) {
|
|||||||
imgSaveBtn.innerHTML = 'Download'
|
imgSaveBtn.innerHTML = 'Download'
|
||||||
|
|
||||||
imgItem.appendChild(img)
|
imgItem.appendChild(img)
|
||||||
imgItem.appendChild(imgSeedLabel)
|
imgItem.appendChild(imgItemInfo)
|
||||||
imgItem.appendChild(imgUseBtn)
|
imgItemInfo.appendChild(imgSeedLabel)
|
||||||
imgItem.appendChild(imgSaveBtn)
|
imgItemInfo.appendChild(imgUseBtn)
|
||||||
|
imgItemInfo.appendChild(imgSaveBtn)
|
||||||
imagesContainer.appendChild(imgItem)
|
imagesContainer.appendChild(imgItem)
|
||||||
|
|
||||||
imgUseBtn.addEventListener('click', function() {
|
imgUseBtn.addEventListener('click', function() {
|
||||||
@ -341,6 +348,14 @@ async function doMakeImage(reqBody) {
|
|||||||
imgDownload.href = imgBody
|
imgDownload.href = imgBody
|
||||||
imgDownload.click()
|
imgDownload.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
imgItem.addEventListener('mouseenter', function() {
|
||||||
|
imgItemInfo.style.opacity = 1
|
||||||
|
})
|
||||||
|
|
||||||
|
imgItem.addEventListener('mouseleave', function() {
|
||||||
|
imgItemInfo.style.opacity = 0.5
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user