JSFiddle - React, Tailwind, and code Playground

by djasrie

HTML

<ul class="gallery">

      <li><img src="http://www.red-team-design.com/wp-content/uploads/2012/05/1.jpg"></li>

      <li><img src="http://www.red-team-design.com/wp-content/uploads/2012/05/2.jpg"></li>

      <li><img src="http://www.red-team-design.com/wp-content/uploads/2012/05/3.jpg"></li>

      <li><img src="http://www.red-team-design.com/wp-content/uploads/2012/05/4.jpg"></li>

      <li><img src="http://www.red-team-design.com/wp-content/uploads/2012/05/5.jpg"></li>

      <li><img src="http://www.red-team-design.com/wp-content/uploads/2012/05/6.jpg"></li>      

  </ul>

  

<p id="about">Kembali ke bahasan / ke blog baru saya</p>

CSS

body{

      background: #eee;

    }



    .gallery{

      list-style: none;

      margin:0px auto; padding: 0;

      width: 700px;

      font-size: 0; 

    }



    .gallery li{

        display: inline-block;

        *display: inline;

        zoom: 1;

        width: 300px; height: 220px;

        margin:1%;

        border: 5px solid #fff;

        -moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);

        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);

        box-shadow: 0 2px 2px rgba(0,0,0,.1);

        -webkit-transition: all .3s ease;

        -moz-transition: all .3s ease;

        -ms-transition: all .3s ease;

        -o-transition: all .3s ease;

        transition: all .3s ease;        

    }

.gallery img {width:100%; height:220px;}



    .gallery:hover li:not(:hover){       

        -webkit-filter: blur(2px) grayscale(1);

        -moz-filter: blur(2px) grayscale(1);

        -o-filter: blur(2px) grayscale(1);

        -ms-filter: blur(2px) grayscale(1);

        filter: blur(2px) grayscale(1);

        opacity: .7; /* fallback */        

    }



    /* Demo page only */

    #about{

        color: #999;

        text-align: center;

        font: 0.9em Arial, Helvetica;

    }



    #about a{

        color: #777;

    }