Jump to content

NielsP

Members
  • Content count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About NielsP

  • Rank
    Newbie
  1. 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:
×