Merge pull request #1 from lulucca12/patch-1

Old Poprocket effect on instagram

README.md

@@ -62,6 +62,7 @@ Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML
 - Walden `filter-walden`
 - Willow `filter-willow`
 - X-Pro II `filter-xpro-ii`
+- Poprocket(old) `filter-poprocket`
 
 ## Custom
 

dist/instagram.css

@@ -428,4 +428,10 @@
   background: -webkit-radial-gradient(circle closest-corner, rgba(0, 91, 154, .35) 0, rgba(0, 0, 0, .65) 100%);
   content: "";
   mix-blend-mode: multiply;
-}
+}
+
+.filter-poprocket::before {
+  background-image: radial-gradient(circle closest-corner, rgba(206, 39, 70, 0.84) 10%, rgba(255, 255, 255, 0)), radial-gradient(circle closest-corner, rgba(15, 5, 46, 0.84) 90%, rgba(255, 255, 255, 0) 10%);
+  content: "";
+  mix-blend-mode: screen;
+}

index.html

@@ -501,6 +501,19 @@
             </div>
           </div>
         </div>
+          
+        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
+          <div class="card">
+            <div class="card-image filter-poprocket">
+              <img src="assets/img/instagram-example.jpg" class="img-responsive"/>
+            </div>
+            <div class="card-header">
+              <span class="h6">Poprocket</span>
+            </div>
+          </div>
+        </div>
+          
+          
       </div>
     </div>
   </div>

src/_poprocket.scss

@@ -0,0 +1,10 @@
+//Poprocket effect
+.filter-poprocket  {
+    //filter: sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg);
+
+    &::before {
+        background-image: radial-gradient(circle closest-corner, rgba(206, 39, 70, .84) 10%, rgba(255, 255, 255, 0)), radial-gradient(circle closest-corner, rgba(15,5,46,.84) 90%, rgba(255,255,255,0) 10%);
+        content: "";
+        mix-blend-mode: screen;
+    }
+}

src/instagram.scss

@@ -43,3 +43,4 @@
 @import "walden";
 @import "willow";
 @import "xpro-ii";
+@import "poprocket";