Разработка - Реализация виджета-галереи | Все для вебмастера

Пишем код HTML:

HTML:

<div class="frame">
    <div class="figures">
    <figure class="fig-1"></figure>
    <figure class="fig-2"></figure>
    <figure class="fig-3"></figure>
    <figure class="fig-4"></figure>
    <figure class="fig-5"></figure>
    <figure class="fig-6"></figure>
    <figure class="fig-7"></figure>
    <figure class="fig-8"></figure>
    <figure class="fig-9"></figure>
    </div>   
</div>

Пишем стиль CSS:

SCSS:

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
    overflow: hidden;
  background: linen;
  color: #333;
    display:flex;
    justify-content:center;
    align-items:center;
}

.figures {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 4px;   
    

    figure {
        margin:0;
        
      background-size: cover;
        transform:scale(1);
      height: 125px;
        width: 125px;
        cursor:pointer;
        position:relative;
        z-index:1;
        opacity:1;
        transition: transform 1s, z-index 0s 1s, opacity 0.5s 0.3s ease-in;
        
        
        &.hide {
            opacity:0;
          transition: opacity 2s ease-out;
        }
        
        &.expand {
            transform:scale(3.1);
            z-index:10;
            transition: transform 2s;
            background-position: center;
        }
        
        &.fig-1 {
            background-image: url("https://source.unsplash.com/tsyi6U1quiI");
            transform-origin: 0 0;
            
        }
    
        &.fig-2 {
            background-image: url("https://source.unsplash.com/FgTcokJpm9w");
            transform-origin: 50% 0;
            background-position: top center;
        }
    
        &.fig-3 {
            background-image: url("https://source.unsplash.com/fT6-YkB0nfg");
            transform-origin: 100% 0;
            background-position: bottom center;
        }   
    
        &.fig-4 {
            background-image: url("https://source.unsplash.com/ju5tx5zl_as");
            transform-origin: 0 50%;
            background-position: center bottom;
        }
    
        &.fig-5 {
            background-image: url("https://source.unsplash.com/qK1Oc5mt4Bg");
            transform-origin: 50% 50%;
            background-position: top center;
        }
    
        &.fig-6 {
            background-image: url("https://source.unsplash.com/8pK37xtN4bo");
            transform-origin: 100% 50%;
        }   

        &.fig-7 {
            background-image: url("https://source.unsplash.com/a8yLl6hpVnA");
            transform-origin: 0 100%;
            background-position: center;
        }

        &.fig-8 {
            background-image: url("https://source.unsplash.com/W2zipE1V-iQ");
            transform-origin: 50% 100%;
        }

        &.fig-9 {
            background-image: url("https://source.unsplash.com/kV3yiegGJUQ");
            transform-origin: 100% 100%;
        }   
    }
}

Придаем динамику:

JavaScript:

$(function(){
    $('figure').click(function(){
        $('figure').toggleClass('hide');
        $(this).removeClass('hide').toggleClass('expand');
    });
});

Смотрим наш результат:

Разработка Реализация виджета-галереи

Ещё ресурсы от baltun