FANDOM


  • Is it possible to make this effect on CSS? (Like the example in a link below) Of course, with the picture and text I want. Redputation (talk) 02:48, September 10, 2020 (UTC)

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

      Loading editor
    • Yes, CSS is exactly how the example does it. What part are you having trouble with?

        Loading editor
    • Andrewds1021 wrote: Yes, CSS is exactly how the example does it. What part are you having trouble with?

      Thanks for the reply! I don't know how to implement the CSS to a template

      Redputation (talk) 12:03, September 10, 2020 (UTC)

        Loading editor
    • 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}}
      
        Loading editor
    • 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)

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.