Untitled

dabblet.css

body{  font-family: arial,sans-serif;  max-width:1080px;}.profile-grid{width:100%;}.profile-block{ margin-bottom: 1.2%;  display:block;  text-align: center;  float:left;}.profile-block:hover .circular-img{  opacity:1;}a {  text-decoration:none;  color:#888;}a .click-profile{  text-decoration:none;}a:hover {  text-decoration:none;  color:#8e68e8;  display:block;  opacity:1;  transition: opacity 1s;}.circular-img{  width:75%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  border-radius: 50%;  background:pink;  opacity:0.4;  transition: opacity 1s;}

dabblet.html

<div class="profile-grid">
	<div class="profile-block"><a href="http://www.example.com" target="_blank" >
		<img class="circular-img" src="https://randomuser.me/api/portraits/men/34.jpg"/>
		<span class="circular-imag-overlay"></span></br>View Profile</a></div>
		
	<div class="profile-block"><a href="http://www.example.com" target="_blank" >
		<img class="circular-img" src="https://randomuser.me/api/portraits/women/64.jpg"/>
		<span class="circular-imag-overlay"></span></br>View Profile</a></div>
		
	<div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/10.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/77.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/women/1.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/95.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/women/66.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/78.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/women/81.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/women/37.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/47.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/33.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/29.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/women/22.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/men/92.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div><div class="profile-block">  <a href="http://www.example.com" target="_blank" ><img class="circular-img" src="https://randomuser.me/api/portraits/women/87.jpg"/><span class="circular-imag-overlay"></span></br>View Profile</a></div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}