NielsP

I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself.

My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture.

I hope you can help me! Need to fix this!

Thank you in advance!

    .container {

      position: relative;

      width: 25%;

      height: auto;

    }

    .image {

      display: block;

      width: 100%;

      height: auto;

    }

    .overlay {

      position: absolute;

      bottom: 0;

      left: 0;

      right: 0;

      background-color: #00b0f0;

      opacity: 0.8;

      overflow: hidden;

      width: 100%;

      height: 0;

      transition: .5s ease;

    }

    .container:hover .overlay {

      height: 100%;

    }

    .text {

      white-space: nowrap;

      color: white;

      font-size: 20px;

      position: absolute;

      overflow: hidden;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      -ms-transform: translate(-50%, -50%);

    }

  <div class="container">

      <a href="AG2R.html">

        <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image">

      </a>

      <div class="overlay">

        <div class="text">AG2R La Mondiale</div>

      </div>

    </div>

This is the picture I used: