Author: | jh3y |
---|---|
Views Total: | 1,605 views |
Official Page: | Go to website |
Last Update: | November 28, 2019 |
License: | MIT |
Preview:

Description:
Driveway.css is a pure CSS library to generate a responsive, interactive, customizable, Masonry-style layout using pure HTML/CSS.
Based on the CSS flexbox layout system.
How to use it:
1. To get started, include the core stylesheet in the document’s head section.
<link href="dist/driveway.min.css" rel="stylesheet" />
2. Create a basic Masonry layout following the markup structure as follows:
<div class="dw"> <div class="dw-panel"> <div class="dw-panel__content"> <p>Content 1</p> </div> </div> <div class="dw-panel"> <img src="2.jpg" class="dw-panel__content" /> </div> <div class="dw-panel"> <div class="dw-panel__content"> <p>Content 3</p> </div> </div> ... </div>
3. Insert nested grid items into the layout using the following CSS classes:
- dw-cluster: required for nested grid items
- dw-cluster–vertical: vertical flow
- dw-cluster–horizontal: horizontal flow
- dw-cluster__segment: segment
- dw-cluster__segment–col: segment column
- dw-cluster__segment–row: segment row
- dw-cluster__segment–quart: segment taking up quarter of the real estate available
- dw-cluster__segment–half: segment taking up half of the real estate available
<div class="dw"> <div class="dw-panel dw-cluster dw-cluster--horizontal"> <div class="dw-cluster__segment dw-cluster__segment--row"> <div class="dw-panel dw-cluster__segment"> <div class="dw-panel__content"> <h2>Content 1</h2> </div> </div> </div> <div class="dw-cluster__segment dw-cluster__segment--row "> <div class="dw-panel dw-cluster__segment "> <div class="dw-panel__content"> <h2>Content 2</h2> </div> </div> <div class="dw-panel dw-cluster__segment "> <div class="dw-panel__content"> <h2>Content 3</h2> </div> </div> </div> </div> ... </div>
4. Highlight the current grid item on mouse hover using the dw-panel--focus
class.
<div class="dw-panel dw-panel--focus"> <div class="dw-panel__content"> <p>Panel content.</p> </div> </div> <!-- Required --> <div class="dw__focus-curtain"></div>
5. Apply a pulse effect to the grid item on mouse hover using the dw-panel--pulse
class.
<div class="dw-panel dw-panel--pulse"> <div class="dw-panel__content"> <p>Panel content.</p> </div> </div>
6. Apply a flip effect to the grid item on mouse hover using the following CSS classes.
<div class="dw-panel dw-flip"> <div class="dw-panel__content dw-flip__content"> <div class="dw-flip__panel dw-flip__panel--front"> Front Content </div> <div class="dw-flip__panel dw-flip__panel--back"> Back Content </div> </div> </div>
hi, does anyone knows how to add some text appear when mouse hover?