0

I'm trying to put an opaque layer above an image that also has responsive text on top of it. The opaque layer should be above the image, but below the text, and also not display upon hovering over the image.

My test page is here: https://www.gorgeous-geek.com/image-layer-test/

I tried to add a layer div, but can't find out how to do this to achieve the result I'm looking for.

Also, I don't manage to correctly right align the orange button with the right hand side of the image. It shows up in different places on Chrome and Safari.

Any help appreciated!

This is the code:

.containerbox {
  position: relative;
  color: white;
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 17.5%;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
}

.bottom-right a {
  color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" style="border: 1px solid #ececec;" alt="Laptop" style="width:100%;">
  <div class="top-left">Top Left</div>
  <div class="bottom-right"><a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a></div>
</div>
</div>
Alexandre B.
  • 5,387
  • 2
  • 17
  • 40
Vibeke
  • 13
  • 4
  • not sure what you are trying to achieve can sure share some snippet of what you want? – Aditya Thakur May 10 '19 at 17:54
  • Possible duplicate of [How to position text over an image in css](https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) – Chris W. May 10 '19 at 18:50
  • I saw that related post Chris, but it didn't include the gradient layer on top of the image. SuperDJ kindly got me sorted with all elements :) Thanks in any case. I appreciate very much the insights shared with me today. – Vibeke May 10 '19 at 21:15

2 Answers2

0

You can utilize the z-index property to control the way your elements are layered:

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Source

Below, I created an overlay using the :after psuedo element of .containerbox, and I gave that overlay a z-index: 1. Then, I gave the elements I want to display above my overlay a z-index: 2:

.containerbox {
  position: relative;
  color: white;
}

.containerbox:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: .5;
  z-index: 1;
}

.top-left {
    position: absolute;
    top: 8%;
    left: 0;
    color: #000;
    font-weight: 800;
    background-color: #a79f9f;
    padding: 6px 40px;
    z-index: 2;
}

.bottom-right {
    position: absolute;
    bottom: 5%;
    right: 17.5%;
    color: #000;
    font-weight: 800;
    background: #de9104;
    font-size: 14px;
    padding: 4px 3%;
    z-index: 2;
}

.bottom-right a {
    color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" style="border: 1px solid #ececec;" alt="Laptop" style="width:100%;">
  <div class="top-left">Top Left</div>
  <div class="bottom-right"><a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a></div>
</div>
Community
  • 1
  • 1
mmshr
  • 937
  • 1
  • 7
  • 9
  • Thanks for this information mmshr. I wasn't too familiar with the function of the z-index, so very glad to have learnt that :) – Vibeke May 10 '19 at 18:43
0

You could use the image filter as shown below. As for the position of the read more button I don't know the result you're looking for.

.containerbox {
  position: relative;
}

.containerbox img {
  border: 1px solid #ececec;
  width: 100%;
  filter: opacity(50%);
  transition: filter .5s ease-out;
}

.containerbox:hover img {
  filter: opacity(100%);
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 17.5%;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
}

.bottom-right a {
  color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" alt="Laptop">
  <div class="top-left">Top Left</div>
  <div class="bottom-right">
    <a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a>
  </div>
</div>

Update

.containerbox {
  position: relative;
}

.containerbox img {
  border: 1px solid #ececec;
  width: 100%;
}

.overlay {
  position: absolute;
  background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
  height:100%;  
  top: 0;
  left: 0;
  width: 100%;
  opacity: 100;
  transition: opacity .5s ease-out;
}

.containerbox:hover .overlay {
  opacity: 0;
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
  z-index: 2;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 0;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
  z-index: 2;
}

.bottom-right a {
  color: white;
}
<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" alt="Laptop">
  <div class="overlay"></div>
  <div class="top-left">Top Left</div>
  <div class="bottom-right">
    <a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a>
  </div>
</div>
SuperDJ
  • 7,488
  • 11
  • 40
  • 74
  • Thanks for this SuperDJ! Is it possible to make the overlay gradient? As for the "Read More" button, I wanted to align the right hand side of the button with the right hand side of the image. Now it's floating when I see it from other screens and browsers (I'm in Chrome on a laptop). – Vibeke May 10 '19 at 18:39
  • Ah, ok, and I realize now I should have added this piece of information: The layer should be dark, rather than white... – Vibeke May 10 '19 at 18:47
  • @Vibeke Have updated the answer with another example – SuperDJ May 10 '19 at 19:05
  • Fantastic! It's working. Thank you so much SuperDJ :D – Vibeke May 10 '19 at 20:58
  • If it's the answer you should mark it as such. This will help other users as well – SuperDJ May 10 '19 at 21:01
  • Ok, I think I just did (green tick, right?). If there's anything else I should do, let me know. Thanks again, and wish you a nice weekend! – Vibeke May 10 '19 at 21:19