levinmejia

<a href="/cart" id="cart-total">
          {{ 'santa-hat.png' | asset_url | img_tag }}
          {% if shop.money_format == '${{amount}}' %}
          <span id="cart-price">{{ cart.total_price | money | replace: '.00', '' }}</span>
          {% else %}
          <span id="cart-price">{{ cart.total_price | money  }}</span>
          {% endif %}
        </a>
        
        <style>

levinmejia

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

levinmejia

.invert {
  -webkit-filter: invert(.8);
  filter: invert(.8);
}

levinmejia

.image-blur {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

levinmejia

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

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;