assets/main/sass/components/_image.scss

   1 ///
   2 /// Massively by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Image */
   8
   9         .image {
  10                 border: 0;
  11                 border-radius: _size(border-radius);
  12                 display: inline-block;
  13                 position: relative;
  14
  15                 img {
  16                         border-radius: _size(border-radius);
  17                         display: block;
  18                 }
  19
  20                 &.left,
  21                 &.right {
  22                         max-width: 40%;
  23
  24                         img {
  25                                 width: 100%;
  26                         }
  27                 }
  28
  29                 &.left {
  30                         float: left;
  31                         margin: 0 2rem 2rem 0;
  32                         top: 0.75rem;
  33                 }
  34
  35                 &.right {
  36                         float: right;
  37                         margin: 0 0 2rem 2rem;
  38                         top: 0.75rem;
  39                 }
  40
  41                 &.fit {
  42                         display: block;
  43                         margin: (_size(element-margin) * 1.25) 0;
  44                         width: 100%;
  45
  46                         &:first-child {
  47                                 margin-top: 0;
  48                         }
  49
  50                         img {
  51                                 width: 100%;
  52                         }
  53                 }
  54
  55                 &.main {
  56                         display: block;
  57                         margin: (_size(element-margin) * 2) 0;
  58                         width: 100%;
  59
  60                         &:first-child {
  61                                 margin-top: 0;
  62                         }
  63
  64                         img {
  65                                 width: 100%;
  66                         }
  67                 }
  68
  69                 @include breakpoint('<=small') {
  70                         &.fit {
  71                                 margin: _size(element-margin) 0;
  72                         }
  73
  74                         &.main {
  75                                 margin: _size(element-margin) 0;
  76                         }
  77                 }
  78         }
  79
  80         a.image {
  81                 overflow: hidden;
  82
  83                 img {
  84                         @include vendor('transition', 'transform #{_duration(transition)} ease-out');
  85                 }
  86
  87                 &:hover {
  88                         img {
  89                                 @include vendor('transform', 'scale(1.05)');
  90                         }
  91                 }
  92         }