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