Picture overlay... Only at the area of the real picture and not the background of the picture

Question

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>

You'll need to use an SVG and SMIL or rely on the semi-supported `clip-path` properties to do what you're after. Either way, your image would have to be an SVG. — Josh Burgess, Dec 29 '16 at 22:10

score 0 · Accepted Answer · edited May 23 '17 at 12:24

I found a relevant Stack Overflow thread where the consensus is that this is unachievable with CSS unless you want a pure black image done with filters - which aren't compatible in all browsers and would not have the sliding transition you've implemented.

So I opted to show you how this could look if you created blue overlays yourself in Photoshop as separate PNG images and transitioned with them. I created the PNG by making a layer filled with #00b0f0, set it to 80% opacity and used it as a clipping mask - essentially what your .overlay was trying to do. Here's a demo:

.container {
  position: relative;
  width: 25%;
  height: auto;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.8;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.overlay .image {
  position: absolute;
  bottom: 0;
}
.container:hover .overlay {
  height: 100%;
}
.text {
  white-space: nowrap;
  color: white;
  text-shadow: #000 0 1px 1px;
  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">
    <img src="https://i.stack.imgur.com/DwIGH.png" alt="overlay" class="image" />
    <div class="text">AG2R La Mondiale</div>
  </div>
</div>

Picture overlay... Only at the area of the real picture and not the background of the picture

1 Answers1