Andrewds1021 wrote:
You do not put the CSS in the template itself. You have to put the CSS in one of the wiki's site CSS pages and adjust the CSS selectors accordingly. Here is what I would suggest as a starting point.
Template Page:
<div class="image-overlay">{{#if: {{{1|}}}
| [[File:{{{1}}}]]
| [[File:ImageOverlayPlaceholder.ext]]
}}<div class="overlay"><div class="overlay-text">{{{2|}}}</div></div></div>
Site CSS:
#WikiaArticle .image-overlay {
position: relative;
overflow: hidden;
}
#WikiaArticle .image-overlay > .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.5s;
}
#WikiaArticle .image-overlay:hover > .overlay {
opacity: 1;
}
#WikiaArticle .image-overlay > .overlay > .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use on Page:
{{TemplateName|ImageName.ext|OverlayText}}
It worked! Thank you so much...
PD: Sorry for my bad explanation
Redputation (talk) 18:07, September 10, 2020 (UTC)