jquery - Apply Grid-Overlay to Image and Video -


i have following issue:

  • i want add overlay videos , images.
  • the overlay based on png-pixel.

  • i want cover whole width , height of images , cideos repeating png-pixel

    [1]: https://i.stack.imgur.com/ljbrb.png <- pixel

here example result: https://theuprisingcreative.com/video/ 

        * {  	box-sizing: border-box;  	margin: 0;  	padding: 0;  }                    .row {              clear: both;          }                    .spalten-6 {              width: 49.99992%;          }            .spalten-12 {              width: 100%;          }                    .spalten-6,  .spalten-12           { float:left;}                .img-box img {              width: 100%;          }                    .img-box {              border-left: 2px solid white;              border-top: 2px solid white;          }              #video-container {      position: relative;      height:300px  }  #video-container {      top:0%;      left:0%;      height:100%;      width:100%;      overflow: hidden;    }  video#bgvid {      position:absolute;      z-index:-1;      background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;      background-size: cover;      transition: 1s opacity;  }  video#bgvid.fillwidth {      width: 100%;     position:relative  }
<div id="video-container">  <video id="bgvid" loop class="fillwidth" autoplay>  <source src=http://bigcom.com/assets/2014/08/ichooseb.mp4 type=video/mp4>  </video>   </div>      <div id="underneath">     <p style="color:#000">content underneath</p>      </div>       <div class="row">     <div class="spalten-6">        <div class="img-box">       <img src="images/fargo-jamie-lee-video-clip.png" alt="">         </div>     </div>     <div class="spalten-6">         <div class="img-box">         <div class="overlay">       <img src="images/la-bomba-video-clip.jpg" alt="">         </div>         </div>     </div>      </div>

thanks lot help!

i able achieve desired result using css gradient background on pseudo-element element #video-container.

for example, if add:

background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;

and prefixed versions #video-container:after, following working example:

* {    box-sizing: border-box;    margin: 0;    padding: 0;  }    .row {    clear: both;  }    .spalten-6 {    width: 49.99992%;  }    .spalten-12 {    width: 100%;  }    .spalten-6,  .spalten-12 {    float: left;  }    .img-box img {    width: 100%;  }    .img-box {    border-left: 2px solid white;    border-top: 2px solid white;    position:relative  }    #video-container {    position: relative;    height: 300px  }    #video-container {    top: 0%;    left: 0%;    height: 100%;    width: 100%;    overflow: hidden;    position: relative; font-size:0;  }    #video-container:after, .img-box:after {    position: absolute;    top: 0;    left: 0;    content: "";    width: 100%;    height: 100%;    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;    -webkit-background-size: 1px 1px;    background-size: 1px 4px;  }    video#bgvid {    position: absolute;    z-index: -1;    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;    background-size: cover;    transition: 1s opacity;  }    video#bgvid.fillwidth {    width: 100%;    position: relative  }
<div id="video-container">    <video id="bgvid" loop class="fillwidth" autoplay>  <source src=http://bigcom.com/assets/2014/08/ichooseb.mp4 type=video/mp4>  </video>  </div>    <div id="underneath">    <p style="color:#000">content underneath</p>  </div>    <div class="row">    <div class="spalten-6">      <div class="img-box">        <img src="http://img.clubic.com/00466352-photo-cadre-philips-affichage-16-9.jpg" alt="">      </div>    </div>    <div class="spalten-6">      <div class="img-box">        <div class="overlay">          <img src="http://www.photographycorner.com/galleries/data/2882/aspect4.jpg" alt="">        </div>      </div>    </div>  </div>

you can control "pixel" size , color using property background-size on pseudo-element #video-container:after. can control opacity entire grid , adjust liking without affecting video.


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more