Files

• _images.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/images

Module Overview

The 'images()' mixin contains several modules which are outlined below.

Examples

Desktop Graphic Module

<div class="desktop-graphic">
    <img src="../../../images/demo-screen.png" alt="" />
    <div class="desktop-graphic_image" style="background-image: url('../../../images/stock-1.jpg')"></div>
</div>  

Scroll On Hover

<div class="desktop-graphic-scroll">
    <img src="../../../images/demo-screen.png" alt="" />
    <div class="desktop-graphic_image" style="background-image: url('../../../images/stock-2.jpg')"></div>
</div> 

Mobile Graphic Module

<img class="mobile-graphic" src="../../../images/mobile-screen.png" />

Color Options

Available colors:

• blue
• green
• purple
• red
• yellow
• white

<img class="mobile-graphic-purple" src="../../../images/mobile-screen.png" />

Horizontal/Vertical Centering

The class center-xy will horizontally and vertically center an image in a container. Alone this doesn't have much practical use, but can be used in different creative ways.

<div class="center-xy hide-overflow" style="height: 88px; width: 180px;">
    <img src="../../../images/team/team-1.jpg">
</div>