JSFiddle - React, Tailwind, and code Playground

by stchangg

HTML

<div id="images">
</div>

CSS

.circle-mask {
  float: left;
  height: 200px;
  width: 200px;
  margin: 10px;
  padding: 0px;
  opacity: 0.8;
  -webkit-mask-box-image: -webkit-radial-gradient(white 0px, white 100px, transparent 100px);
}

.circle-mask:hover {
    opacity: 1;            
}

JavaScript

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "nature",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images").addClass("circle-mask");
      if ( i == 3 ) return false;
    });
  });