Files
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.
- Name:
image
- Components: n/a
- Modifiers: n/a
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>
- <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>
<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>
- <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>
<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" />
- <img class="mobile-graphic" src="../../../images/mobile-screen.png" />
<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" />
- <img class="mobile-graphic-purple" src="../../../images/mobile-screen.png" />
<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>
- <div class="center-xy hide-overflow" style="height: 88px; width: 180px;">
- <img src="../../../images/team/team-1.jpg">
- </div>
<div class="center-xy hide-overflow" style="height: 88px; width: 180px;">
<img src="../../../images/team/team-1.jpg">
</div>