Fun with Image-rendering

Fun with Image-rendering.markdown

Fun with Image-rendering

Experimenting with CSS Image-rendering for a project.

A Pen by Pino Ceniccola on CodePen.

License.

index.html

<div>
  <img src="https://unsplash.it/20/8/?image=851" class="pixelated">
  <img src="https://unsplash.it/780/300/?image=851" class="bilinear">
</div>

script.js

/*
experimenting with CSS image-rendering for a project.

pixelated image is actually 20x8px

*/

style.css

div {
  position:relative;
}
img {
  width:100%;
  height:auto
}
.pixelated {
  image-rendering:-moz-crisp-edges;
  image-rendering:pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
.bilinear {
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  transition:opacity 0.25s ease 0s;
}
div:hover .bilinear {
  opacity:0.6;
}