How to Show an Animation That Is Hidden Behind a Colored Div Using a "Reveal" Div on The Surface

How to show an animation that is hidden behind a colored div using a reveal div on the surface

Use mask to create a hole and no need for the reveal div. You can later change the size and position to have the animation you want:

.green {
  background: linear-gradient(45deg,#159c82,red);
  height: 100vh;
}

.blue {
  background:#1b4287;
  height: 100%;
  -webkit-mask:
    /* you adjust this */
    linear-gradient(#fff,#fff) 
     50px 50px/ /*left top*/
     200px 20px, /*width height*/
    /**/
    linear-gradient(#fff,#fff); 
  -webkit-mask-repeat:no-repeat;    
  -webkit-mask-composite: destination-out;
  
  mask:
    /* you adjust this */
    linear-gradient(#fff,#fff) 
     50px 50px/ /*left top*/
     200px 20px, /*width height*/
    /**/
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;    
  mask-composite:exclude;
  transition:.5s;
}
.blue:hover {
  -webkit-mask-position:100px 100px,0 0;
          mask-position:100px 150px,0 0;
  -webkit-mask-size:300px 50px,auto;
          mask-size:300px 50px,auto;
}

body {
  margin: 0;
}

<div class="green">
  <div class="blue">
  </div>
</div>

Sliding animation when hiding/showing a div

I would use CSS transition rather than animation. I've found it easiest to do by animating the lower div rather than the upper one, and changing its position so that it covers the top one (or, of course, not). See demonstration below, I've made as minimal changes as I could to the CSS and JS:

var cover = true;var trigger = document.getElementById("trigger");var bottomdiv = document.getElementsByClassName("body")[0];
trigger.addEventListener('click', function() { if (cover) {   bottomdiv.classList.add('cover');  } else {   bottomdiv.classList.remove('cover');  }  cover = !cover;});

div {  position: relative;  display: block;  width: 100%;  padding: 10px;}

.top {  background: #999;}
.body {  background: #555;  transform: translateY(0%);  transition: transform 0.5s;}
.cover {  transform: translateY(-100%);}

<div id="topdiv" class="top hide"><p>Top</p></div><div class="body"><p>Body</p><button id="trigger">Trigger</button></div>

CSS - Child element see through parent

As far as I know, you cant subtract one element from another to create this effect, you have to fake it. Consider the white strip as 3 elements sitting next to each other. The outer ones have a white fill, and the center is transparent. These 3 elements sit inside a wrapper that has a white border (to create the white edges). This effect is demonstrated in the example below.

img {  width: 100%;}
.center {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
.row {  display: flex;  flex-direction: row;  width: 100%;  height: 100px;  border: 5px solid white;}
.row .col {  display: inline-block;  height: 100%;  background-color: white;  width: 100%;}
.row .col.m {  background-color: transparent;  width: 500px;}
.row .col span {  color: white;  text-align: center;}

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfz6VkKDw0b3AacQg2PhSq8BpHf1z8Ngg-iYt_1Qqu5cR6Q3_Z&usqp=CAU">
<div class="center row">   <div class="l col"></div>  <div class="m col">    <span class="center"> Welcome back, <br> user1! </span>  </div>  <div class="r col"></div></div>

How to display or hide component with transition animation in react js

I solved the problem by adding opacity and transition and visibility css styles :

return (
    <div
      style={{
        background: "rgba(0,0,0,.3)",
        position: "fixed",
        zIndex: 1,
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
        opacity: !isOpen ? "0" : "1",
        transition: "all .2s",
        visibility: !isOpen ? "hidden" : "visible",
      }}
    ></div>
  );

How to implement a CSS overlay which is partially transparent?

Similar to the "border" solution, you can use an inset box-shadow, some what effectively.

.wrap {
  position: relative;
}

.wrap::before {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-shadow: inset 0 0 0 150px rgb(0 0 0 / 70%);
  content: '';
}

body {
  margin: 0;
}

<div class="wrap">
  <img src="https://www.fillmurray.com/1000/1000">
</div>

Exclude multiple rects from a div backdrop background

After some more research on masks I found a pretty neat and easy way to implement this. The benefit of this approach is that you can simply manipulate svg properties to change positions of highlighted rects and/or add/remove as many rects as you want. It also has a good browser support since it uses inline svg mask.

So, idea here is that a mask in its default mode basically hides masked object where pixels of the mask are black and reveals where those are white (similar to Photoshop masks). Everything in between is half-transparent.

Here my goal was to show all the backdrop except for 2 (or more) areas. This was achieved by following steps:

1. Create a rect inside the mask that would cover all the backdrop
2. Make it white (reveals all the backdrop)
3. Add 2 (or more) rects under it in the dom (above in display list)
4. Make them black (those areas are subtracted from backdrop)

.highlighter-backdrop {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.highlighter-backdrop .backdrop-rect {
    width: 100vw;
    height: 100vh;
    fill: rgba(0, 0, 0, 0.55);
}

.highlighter-backdrop.active {
  opacity: 1;
}

<svg id="backdrop" class="highlighter-backdrop active"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <defs>
        <mask id="highlighterBackdropMask">
            <rect fill="white" height="100%" width="100%" x="0" y="0"></rect>
            <rect x="150" y="150" width="50" height="50" fill="black" />
            <rect x="400" y="250" width="100" height="100" fill="black" />
        </mask>
    </defs>
    <rect class="backdrop-rect" x="0" y="0" mask="url(#highlighterBackdropMask)"></rect>
</svg>

How to hide div first in slide toggle and show when click?

To get this slider to slide from left-to-right as you described, and without making any other changes to your markup, you can set style="display: none" inline on the .accordion_box div and then in your CSS add display: inline-block; to the div selector you have. Try this:

$(".slide-toggle").click(function() {  $(".accordion_box").animate({    width: "toggle"  });});

#about .about_content .accordion_content {  font-size: 0;  min-height: 700px;  padding-top: 50px;  text-align: left;}
#about .about_content .accordion_content .accordion_box,#about .about_content .accordion_content .accordion_toggle {  font-size: 16px;  display: inline-block;  vertical-align: top;}
#about .about_content .accordion_content .accordion_box {  background: blue;  min-height: 200px;  width: 90%;  display: inline-block;}
#about .about_content .accordion_content .accordion_toggle a.slide-toggle {  display: block;  width: 50px;  height: 200px;  background: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="about">  <div class="wrapper">    <div class="about_content">      <h3>About Us</h3>
      <div class="accordion_content">        <div class="accordion_box" style="display: none;"></div>        <div class="accordion_toggle">          <a href="#about" class="slide-toggle"></a>        </div>      </div>    </div>  </div></div>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

How to change visibility of a div slidely with jQuery?

Just set the container to be visible and undisplayed and then apply .slideDown().

$button = $('.button');
$container = $('.container');

$button.click( function(event) {
  event.preventDefault();
  $container
    .css({
      visibility: 'visible',
      display: 'none'
    })
    .slideDown();
});

Demo: http://jsbin.com/sefor/1/edit

---

Related Topics