JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<img src="https://picturepan2.github.io/instagram.css/assets/img/instagram.jpg" width="300px" height="300px">

<img class="filter-helena" src="https://picturepan2.github.io/instagram.css/assets/img/instagram.jpg" width="300px" height="300px">

<figure class="filter-helena">
  <img src="https://picturepan2.github.io/instagram.css/assets/img/instagram.jpg" width="300px" height="300px">
</figure>

<div class="filter-helena"></div>

<br>
<div class="jarallax filter-1977">
    Your content here...
	
	
	<video loop autoplay muted>
		<source src="http://192.168.1.55/vid.mp4" type="video/mp4">
	</video>

</div>

CSS

@import url("https://picturepan2.github.io/instagram.css/dist/instagram.min.css");

[class*="filter"]::before{
  pointer-events: none;
}

figure,div{
  display: inline-block;
  width: 300px;
  height: 300px;
}

div{
  background-image: url(https://picturepan2.github.io/instagram.css/assets/img/instagram.jpg);
  background-size: contain;
}


img{pointer-events: none;user-select: none;}


*{padding:0;margin:0;}
.jarallax {
    position: relative;
    z-index: 0;
    height: 200vh;
    width: 100vw;
}

.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


.jarallax > video {
    position: absolute;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}