levinmejia

<link rel="stylesheet" href="css/vendor/cssgram.min.css">

levinmejia

<figure class="aden">
<img src="../img.png">
</figure>

levinmejia

<div class="filter-img">
  <div class="circle multiply"></div>
  <img src="img/backpack-lake.jpg">
</div>

<style>
.filter-img {
	position: relative;
	width: 100%;
	height: 100%;

levinmejia

<div class="filter-img">
  <div class="hello">hello</div>
  <img src="img/backpack-lake.jpg">
</div>

<style>
.hello {
	position: absolute;
  top: 50%;
  left: 50%;

levinmejia

.solid-colour-blend {
	width: 100%;
	height: 300px;
	background-color: #F05B6F;
	background-image: url('../img/backpack-lake.jpg');
	background-position: center center;
  background-blend-mode: multiply;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

levinmejia

.linear-gradient-blend {
	width: 100%;
	height: 300px;
	background: linear-gradient(45deg, #3AC9F5 0%, #BF4DD7 49%, #FC5E57 100%), url('../img/backpack-lake.jpg');
	background-position: center center;
  background-blend-mode: screen;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

levinmejia

-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);

levinmejia

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  transition: 2s;
  animation-timing-function:ease-in-out;
}

.grayscale:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);

levinmejia

<style>
.animate-blur {
  -webkit-animation: blur-animated 2s forwards;
}

@-webkit-keyframes blur-animated {
  0% {
    -webkit-filter: blur(0);
  }
  

levinmejia

<!-- /snippets/product-card.liquid -->

{% comment %}
  The product card snippet is passed a liquid object, used in this file
  as "product". The object is either "product" or "item", the latter if
  it is from search results.
{% endcomment %}

<a href="{{ product.url | within: collection }}" class="product-card">
  <div class="product-card__image-wrapper">