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

This commit is contained in:
cmdr2 2022-08-27 11:21:10 +05:30
parent 35dc13ffcf
commit 7c60189f29

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
})
}
}