CodePen

HTML

            
               <section>
   <div id="c1"></div>
   <div id="c2"></div>
   <div id="c3"></div>
   <div id="c4"></div>
   <div id="c5"></div>
   <div id="c6"></div>
   <div id="c7"></div>
   <div id="c8"></div>
   
   <figure>
     <div id="cb"></div>
     <div id="cm"></div>
     <div id="cs"></div>
   </figure>
   
</section>

<p>Photos</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
}

/* @group Mixins */

@mixin transition ($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}

@mixin rotate($arguments) {
    -webkit-transform: $arguments;
    -moz-transform: $arguments;
    -ms-transform: $arguments;
    -o-transform: $arguments;
    transform: $arguments;
}

/* @end */

body {
   
   background-color: #32393d; 

    section {
        background-color: #fff;

        width: 370px;
        height: 370px;

        position: relative;

        margin:50px auto;

        border-radius: 80px;

        &:hover > figure {
            opacity: 1;
        }

        div {
            position: relative;

            width: 150px;
            height: 100px;

            border-radius: 100px;

            opacity: 0.7;

            &#c1 {
                background-color: darken(#d685aa, 10%);

                top: 132px;
                left: 25px;
            }

            &#c2 {
                background-color: darken(#f26e64, 10%);

                top: -24px;
                left: 49px;

                @include rotate(rotate(45deg));
            }

            &#c3 {
                background-color: darken(#fab34e, 10%);

                top: -150px;
                left: 114px;

                @include rotate(rotate(90deg));
            }

            &#c4 {
                background-color: darken(#f9f250, 10%);

                top: -220px;
                left: 178px;

                @include rotate(rotate(135deg));
            }

            &#c5 {
                background-color: darken(#cbe966, 10%);

                top: -268px;
                left: 196px;
            }

            &#c6 {
                background-color: darken(#9bd2af, 10%);

                top: -308px;
                left: 175px;

                @include rotate(rotate(45deg));
            }

            &#c7 {
                background-color: darken(#a7c2e3, 10%);

                top: -380px;
                left: 114px;

                @include rotate(rotate(90deg));
            }

            &#c8 {
                background-color: darken(#bda1d2, 10%);

                top: -504px;
                left: 49px;

                @include rotate(rotate(135deg));
            }
        }

        figure {
            
            @include transition (opacity, 0.3s, ease-in-out);
            opacity: 0;

            div {
                border: 1px solid darken(#efefef, 10%);
                border-radius: 50%;

                position: absolute;

                &#cb {
                    width: 320px;
                    height: 320px;

                    top: 24px;
                    left:24px;
                }

                &#cm {
                    width: 210px;
                    height: 210px;

                    top: 85px;
                    left:85px;
                }

                &#cs {
                    width: 125px;
                    height: 125px;

                    top: 125px;
                    left:125px;
                }
            }
        }
    }

    p {
        margin: 20px 0;

        text-align: center;

        font: 50px/0 'Helvetica Neue', HelveticaNeue-Light, sans-serif;
        font-weight: 100;

        color: #fff;
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /**
*** Pure CSS3 iOS 7 Photo-App Icon with Hover-Effect
*** Author: Kamil Czujowski
*** Made with ♥ 
*** https://github.com/kamilczujowski
*** Twitter: @kamilczujowski
*** Inspiration: Apple.com
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................