Question 211229 in Html Question posted in
Some basic documentation can be found here.

Html – How to add transparent gradient ABOVE a bottom nav bar with css?

How do I add the transparent gradient effect when an element is partially hidden by a bottom nav bar like in the example below.

I can add a transparent gradient to an element like so: https://stackoverflow.com/a/4480950/1662619

But not above an element, is it even possible? With some hidden element perhaps?
Example

Tags:

2

Answers


  1. 0

    what do you mean with ‘But not above an element’. The navbar lays on top of everything and the content is behind that.

    And the top part of the navbar fades away. This can be done in many ways, one example would be to use a gradient. See below.

    body {
    background: black;
}

.nav {
    background: #F2F2F2;
    width: 100%;
    height: 8em;
    background: linear-gradient(0deg, #F2F2F2 80%, transparent);
    display: flex;
    padding-top: 2em;
    align-items: center;
    justify-content: space-evenly;
}
    <div class="nav">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
    <img style="height: 6em" src="https://cdn0.iconfinder.com/data/icons/mixed-ui-7/512/UI_20_home-512.png">
</div>
    Login or Signup to reply.
  2. 0

    Not sure what your requirements are or if you are using CSS frameworks etc., but a simple idea is a div between the image and the actions.

    Position that div with position: relative;, give it a positive z-index z-index: 2;, a fixed height and a negative margin.
    Make the div above also position: relative; and give it a lower z-index like z-index: 0;. Add the gradient to the in-between div and there you have it.

    See snippet below:

    * { margin: 0; padding: 0; }

body { padding: 10px; }

p { margin: 5px 0 8px; }

.card {
  width: 100%;
  max-width: 400px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

.card .content {
  padding: 10px 10px 0 10px;
}

.card .map {
  position: relative;
  z-index: 0;
  width: 80%;
  max-width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.card .fading-gradient-bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 16px;
  margin-top: -16px;
  background: rgb(200,200,200);
background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(200,200,200,0) 100%);
}

.card .actions {
  font-size: 40px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 0 0 10px 10px;
  background: rgb(200,200,200);
}
    <div class="card">
  <div class="content">
    <h3>Title</h3>
    <p>Content, like Lorem Ipsum or something</p>
  </div>
  <div class="map">
    <img src="https://picsum.photos/seed/gradient/400/200/" alt="">
  </div>
  <div class="fading-gradient-bottom"></div>
  <div class="actions">
    👍🏻 👋🏻 ✅ 🔌 🍻
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search