CODEWITHSUNDEEP
htmltransitionfadeinhiddenslide
Tim
Tim

Reputation: 91

make a transition with a hidden element

I have an html code with a hidden video. when I hover over a text, a video will be visable and start with playing. the transition is to quick. so i wnat to make a kind of fade in or slide in effect. but when i want to add a transition line in my css, the hole code stop with working.

I read on the internet that you can't transitions hidden elements, but how should i change the code to make a fade in effect with te video.

many thanks!

the code:

<div scroll="no" style="overflow: hidden">
<video id="Hvideo" width="700" height="100%" controls hidden muted loop>
    <source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>  
<div id="Htext">
    <button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
<script>
  var Htext=document.getElementById("Htext");
  var Hvideo=document.getElementById("Hvideo");

  function PauseH(){
    Hvideo.pause();
    Hvideo.hidden = true;
  }

  function PlayH(){
  if(Hvideo.paused) {
   Hvideo.play();
   Hvideo.hidden = false;
   }    
  }
</script>

css:

#Htext{
background: none;
border: none;
font-size: 50px;
padding-bottom: 30px;
position: relative;
top: 10px;
left: 30px;
overflow: hidden;

}

#Hvideo{
position: absolute;
top: 0%;
right: -20%;
overflow: hidden;
}

#Hvideo::-webkit-media-controls-enclosure{
display: none;
overflow: hidden;
}

Upvotes: 1

Views: 1621

Answers (1)

connexo
connexo

Reputation: 56754

You can use this CSS and keep the JS the way it is:

#Hvideo[hidden] {
  display: block;
  visibility: visible;
  opacity: 0;
}
#Hvideo:not([hidden]) {
  opacity: 1;
}
#Hvideo {
  transition: opacity 0.4s ease-in-out;
}

Upvotes: 4

Related Questions