assets/main/sass/components/_image.scss

   1 ///
   2 /// Editorial 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-radius: _size(border-radius);
  11                 border: 0;
  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                         padding: 0 1.5em 1em 0;
  32                         top: 0.25em;
  33                 }
  34
  35                 &.right {
  36                         float: right;
  37                         padding: 0 0 1em 1.5em;
  38                         top: 0.25em;
  39                 }
  40
  41                 &.fit {
  42                         display: block;
  43                         margin: 0 0 _size(element-margin) 0;
  44                         width: 100%;
  45
  46                         img {
  47                                 width: 100%;
  48                         }
  49                 }
  50
  51                 &.main {
  52                         display: block;
  53                         margin: 0 0 (_size(element-margin) * 1.5) 0;
  54                         width: 100%;
  55
  56                         img {
  57                                 width: 100%;
  58                         }
  59                 }
  60         }
  61
  62         a.image {
  63                 overflow: hidden;
  64
  65                 img {
  66                         @include vendor('transition', 'transform #{_duration(transition)} ease');
  67                 }
  68
  69                 &:hover {
  70                         img {
  71                                 @include vendor('transform', 'scale(1.075)');
  72                         }
  73                 }
  74         }