0

Could someone explain to me how I can show my text "I would like to go" and "select" above the blueish color overlay that I have created over my image, so that they do not appear greyed out? (please see picture). I know that I can achieve this using z-index and opacity, but these text elements are child elements of my overlay, and I read that you cannot set a child in front of a parent element. How would I go about this in my code?

enter image description here

This is my html/css:

.panorama {
  height:100vh;
  min-height:900px;
}

.panorama-overlay {
  min-height:900px;
  background: rgba(133,216,206,0.57);
  opacity: 0.57;
}

.panorama-activity-select-text {
  color: #ffffff;
  font-family: Futura;
  font-size: 38px;
  font-weight: 700;
  text-transform: uppercase;
  text-align:center;
  /*line-height: 450px;*/
  display:inline;
  margin-left:2em;
}

.panorama-activity-select {
  color: #ffffff;
  font-family: Futura;
  font-size: 27px;
  font-weight: 700;
  text-transform: uppercase;
  border: 5px solid #ffffff;
  text-align:center;
  width: 424px;
  height: 57px;
  display:inline-block;
  vertical-align:middle;
  padding-top:0.2em;
  margin-left:3em;
  cursor:pointer;
}

.select-activity-arrow {
  position:absolute;
  right:18em;
  top:-3.7em;
  cursor:pointer;
}

.build-roadtrip-text {
  width: 258px;
  height: 42px;
  color: #ffffff;
  font-family: Futura;
  font-size: 17px;
  font-weight: 700;
  text-align:center;
  line-height:35px;
  margin-top:3em;
  border: 2px solid #ffffff;
  left:50%;
  transform: translateX(-50%);
  cursor:pointer;
}
<section class="panorama" style="background: url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;">
    <section class="panorama-overlay">
      <div class="vertical-center">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <p class="panorama-activity-select-text">I WOULD LIKE TO GO</p>
            </div>
            <div class="col-md-6">
              <p class="panorama-activity-select">SELECT</p>
              <img src="{{route('cacheImage', ['newDesign', 'select-activity-arrow.png']) }}" class="select-activity-arrow"/>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-offset-6">
            <p class="build-roadtrip-text">BUILD MY ROAD TRIP</p>
          </div>
        </div>
      </div>
    </section>
  </section><!-- panorama navigation section end -->
Robert Wade
  • 4,918
  • 1
  • 16
  • 35
Benny
  • 839
  • 16
  • 32

3 Answers3

0

You are doing it all wrong.

.panorama-overlay {
  min-height:900px;
  background: rgba(133,216,206,0.57);
  opacity: 0.57;
}

the opacity:0.57 is set to the parent of the text. So it also applies to its children. Hence the text appears to be greyed.

Do it this way: You can always use multiple backgrounds in background: of css.

So just use the linear-gradient property to overlay the color on the image background.

Replace your background in .panorama:

style="background:linear-gradient(rgba(133,216,206,0.57),rgba(133,216,206,0.57)), url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;"

Then final code will be:

<section class="panorama" style="background:linear-gradient(rgba(133,216,206,0.57),rgba(133,216,206,0.57)), url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;">
    <section class="panorama-overlay">
      <div class="vertical-center">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <p class="panorama-activity-select-text">I WOULD LIKE TO GO</p>
            </div>
            <div class="col-md-6">
              <p class="panorama-activity-select">SELECT</p>
              <img src="{{route('cacheImage', ['newDesign', 'select-activity-arrow.png']) }}" class="select-activity-arrow"/>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-offset-6">
            <p class="build-roadtrip-text">BUILD MY ROAD TRIP</p>
          </div>
        </div>
      </div>
    </section>
  </section><!-- panorama navigation section end -->

and change your css.

.panorama-overlay {
  min-height:900px;
}

Hope this helps.

update

.back
{
  text-align:center;
  height:200px;
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("http://cdn.p-r-i.org/wp-content/uploads/2012/09/09120259/Meetings2.jpg") no-repeat center;
}
.title 
{
  color:white;
  text-align:center;
  vertical-align: middle;
  line-height:200px;
  font-family: 'Lato', sans-serif;
}
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
 <div class='back'>
  <h1 class='title'>yevadura ?</h1>
 </div>
</body>
</html>
Sreekanth Reddy Balne
  • 3,264
  • 1
  • 18
  • 44
  • What is the point in making it via gradient? Especially, when you are make a gradient from one color to exactly the same color? – Senpai.D Oct 27 '17 at 20:41
  • I don't understand why anyone downvoted my answer. @Den why don't you try it yourself. You can't directly overlay a color on a background image using background:rgba(r,g,b,a), url('some.jpg'); But you can use a linear-gradient to do so. So, we are just trying to overlay the color with linear-gradient(same-color). – Sreekanth Reddy Balne Oct 28 '17 at 13:14
0

Here is the point where you have made a common mistake

.panorama-overlay {
  min-height:900px;
  background: rgba(133,216,206,0.57);
  opacity: 0.57;
}

Let's have a look into rgba(133,216,206,0.57) - it is a color indicator with alpha channel which specifies the opacity of the color itself, so the last letter "a" (in "rgba") goes for 0.57 at the end of value of this indicator. By declaring this in your CSS you create a 57% transparent "blueish" color and put it over your image.

However, you are placing another option for this element - the overall opacity with declaration of opacity: 0.57. By this you make the "blueish" color of background be 57% more "blueish" and also you are making all the elements within the panorama-overlay be 57% more transparent.

Quick answer would be:

1) Remove opacity: 0.57;

2) Make background: rgba(133,216,206,0.23);

3) Adjust the opacity within the background to the way you like it

Senpai.D
  • 439
  • 3
  • 14
  • I am a dork for not having seen the double opacity ...... :/ that was the issue, it was so easy .... feeling almost bad to have asked a question for this, haha, thanks! problem solved – Benny Oct 27 '17 at 21:05
  • @Benny for years I have thought that it was too stupid of me to ask simple questions here, and you may not believe me, but i really did asked them after all) take it easy and have a good day ;) – Senpai.D Oct 27 '17 at 21:19
  • ;) glad to hear I am not alone on this, thanks! have a good day as well – Benny Oct 27 '17 at 21:57
-1

I see here that you set:

background: rgba(133,216,206,0.57);
  opacity: 0.57;

so you set both the opacity of the background AND the opacity of all childs in the DOM; as to say: the first set the opacity of the stylized element itself, the second the elemnt and other stuffs, so they are not interexcangable. Even though they might be used together, i don't see the utility here. I'd better use

background: rgba(133,216,206,0.57);

alone, in order to solve the opacity problem of childs..

holden
  • 1,721
  • 12
  • 19
  • Removing the double opacity leaving the reast of the code intact solved my issue , thanks :) – Benny Oct 27 '17 at 21:07