Jump to content
NielsP

Image Overlay... only real picture not the "background" of the picture

Recommended Posts

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:

7839q.png

Share this post


Link to post
Share on other sites

Remove the background color from the overlay rule.

 

If you still want that color behind the image then put the color on the container.

Share this post


Link to post
Share on other sites

You either have to produce a image that will overlap the transitioning background masking the background to show shirt only being overlayed, or svg that will produce same effect.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...