holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reduce opacity of the labels over the image until the mouse moves over it

Browse Source
This commit is contained in:
cmdr2 2022-08-27 11:21:10 +05:30
parent 35dc13ffcf
commit 7c60189f29
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -95,6 +95,9 @@
display: inline;
padding-right: 10px;
}
.imgItemInfo {
opacity: 0.5;
}
</style>
</html>
<body>
@ -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
})
}
}