html - Delay before :hover becomes active -

i have background video on title page 2 divisions on it, each covering half page. both divisions have message on them, appears 6 seconds after loading page , :hover effect adds dark transparent background on whole division.

now question: want know if it's possible make :hover take effect 6 seconds after loading page message appears. :hover darkens half of screen before message appears looks kind of stupid first 6 seconds.

simplified version of code:

html:

<div class="ex1">     <div class="ex2">         <h1> hello world! </h1>     </div>     <div class="ex3">         <h1> pfudor </h1>     </div> </div> 

and css:

h1 {     font-size: 48px;     opacity: 0;     animation: fadein 2s forwards;     animation-delay: 6s; }  .ex1 {     height: 300px;     width: 1200px;     background-image: url('http://i.ytimg.com/vi/qrc4vk6kisy/maxresdefault.jpg'); }  .ex2 {     width: 50%;     height: 100%;     display: inline-block;     float: left;     text-align: center; }  .ex3 {     width: 50%;     height: 100%;     display: inline-block;     float: right;     text-align: center; }  .ex2:hover {     background-color: rgba(0, 0, 0, 0.35); }  .ex3:hover {     background-color: rgba(0, 0, 0, 0.35); }  @keyframes fadein {     { opacity: 0; }     { opacity: 1; } } 

you make overlay using :after pseudo selector , animate same delay. ex1 need position: relative though make sure absolute positioned element understands parents size.

h1 {      font-size: 48px;      opacity: 0;      animation: fadein 2s forwards;      animation-delay: 6s;  }    .ex1 {      position: relative;      height: 300px;      width: 1200px;      background-image: url('http://i.ytimg.com/vi/qrc4vk6kisy/maxresdefault.jpg');  }    .ex2 {      width: 50%;      height: 100%;      display: inline-block;      float: left;      text-align: center;  }    .ex3 {      width: 50%;      height: 100%;      display: inline-block;      float: right;      text-align: center;  }    .ex2:hover {      background-color: rgba(0, 0, 0, 0.35);  }    .ex3:hover {      background-color: rgba(0, 0, 0, 0.35);  }    .ex1:after {      content: "";      display: block;      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      animation: remove 0s forwards;      animation-delay: 6s;  }    @keyframes fadein {      { opacity: 0; }      { opacity: 1; }  }    @keyframes remove {      { width: 100%; height: 100%; }      { width: 0; height: 0; }  }

<div class="ex1">      <div class="ex2">          <h1> hello world! </h1>      </div>      <div class="ex3">          <h1> pfudor </h1>      </div>  </div>