@ciar4n/izmir
Version:
An image hover mini CSS library
214 lines (197 loc) • 8.61 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo - Izmir</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/just-the-docs.css">
<link rel="stylesheet" href="assets/css/izmir.css">
<link rel="stylesheet" href="assets/css/docs.css">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/fa-solid.min.css">
<script src="assets/js/vendor/lunr.min.js"></script>
<script src="assets/js/just-the-docs.js"></script>
<!-- Begin Jekyll SEO tag v2.6.1 -->
<meta name="generator" content="Jekyll v3.8.6" />
<meta property="og:title" content="Demo" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="ImageHover CSS Library" />
<meta property="og:description" content="ImageHover CSS Library" />
<link rel="canonical" href="demo.html" />
<meta property="og:url" content="demo.html" />
<meta property="og:site_name" content="Izmir" />
<script type="application/ld+json">
{"@type":"WebPage","headline":"Demo","url":"demo.html","description":"ImageHover CSS Library","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body class="home">
<header class="home-header">
<div class="home-wrapper">
<h1 class="entry-title">Izmir Hover Effects</h1>
<h4 class="entry-subtitle">A Mini CSS Library</h4>
<a href="1A-getting-started.html" class="btn">View Documentation</a>
</div>
</header>
<div id="main-content" class="home-content home-wrapper" role="main">
<div class="col-3">
<div class="col-item">
<figure class="c4-izmir c4-border-bottom-left c4-image-rotate-right c4-gradient-bottom-right" tabindex="0" style="--primary-color: #f12711; --secondary-color: #f5af19; --image-opacity: .1;">
<img src="assets/images/image04.jpg" alt="Sample Image" />
<figcaption class="c4-layout-bottom-left">
<div class="c4-reveal-right c4-delay-100">
<h2>
Creative Control
</h2>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-cc-3 c4-image-zoom-out c4-gradient-bottom-right" tabindex="0" style="--primary-color: #7303c0; --secondary-color: #ec38bc;">
<img src="assets/images/image06.jpg" alt="Sample Image" />
<figcaption>
<div class="c4-rotate-up-right c4-delay-200">
<h2>
Endless
</h2>
</div>
<div class="c4-rotate-down-left c4-delay-200">
<h2>
Possibilities
</h2>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-right c4-image-pan-left c4-gradient-top" tabindex="0" style="--primary-color: #000046; --secondary-color: #1CB5E0; --text-color: #fdeff9; --border-color: #fdeff9;">
<img src="assets/images/image05.jpg" alt="Sample Image" />
<figcaption class="c4-layout-top-right">
<div class="c4-reveal-left">
<h2>
Compose
</h2>
</div>
<div class="c4-reveal-left c4-delay-200">
<h2>
Design
</h2>
</div>
<div class="c4-reveal-left c4-delay-400">
<h2>
Style
</h2>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-cc-1 c4-image-zoom-out c4-gradient-bottom-right" tabindex="0" style="--primary-color: #02AAB0; --secondary-color: #00CDAC; --border-color: #e1f0e4; --text-color: #e1f0e4;">
<img src="assets/images/image02.jpg" alt="Sample Image" />
<figcaption class="c4-layout-bottom-right">
<div class="c4-reveal-left c4-delay-800">
<h2>
Build Your Own
</h2>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-center c4-image-zoom-in c4-gradient-top" tabindex="0" style="--primary-color: #e52d27; --secondary-color: #b31217; --text-color: #fdeff9; --border-color: #fdeff9; --image-opacity: .1;">
<img src="assets/images/image07.jpg" alt="Sample Image" />
<figcaption class="">
<div class="c4-fade-up">
<h2>
Responsive
</h2>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-corners-1 c4-image-zoom-out c4-gradient-bottom" tabindex="0" style="--primary-color: #E0EAFC; --secondary-color: #CFDEF3; --text-color: #1f467b; --border-color: #1f467b; --image-opacity: .1;">
<img src="assets/images/image08.jpg" alt="Sample Image" />
<figcaption class="c4-layout-top-left">
<div class="c4-reveal-down">
<div>
<h2 style="margin-bottom: 5px;">
Creative Control
</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-vert c4-gradient-top-right c4-image-zoom-in" style="--primary-color: #0fa5ac; --secondary-color: #5f48a2;">
<img src="assets/images/image09.jpg" alt="Sample Image" />
<figcaption class="c4-layout-center-center">
<div class="c4-izmir-title-wrapper c4-reveal-up">
<h2 class="c4-izmir-title">
Lorem ipsum dolor
</h2>
</div>
<div class="c4-izmir-caption-wrapper c4-reveal-down">
<p class="c4-izmir-caption">Donec nec justo eget felis facilisis fermentum.</p>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-cc-2 c4-gradient-bottom-left c4-image-zoom-in" style="--primary-color: #ef6698; --secondary-color: #4028ac;">
<img src="assets/images/image10.jpg" alt="Sample Image" />
<figcaption class="c4-layout-center-center">
<div class="c4-izmir-icon-wrapper c4-fade">
<i class="fas fa-plus fa-3x"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-left c4-gradient-top-right c4-image-pan-right" style="--primary-color: #4ca2cd; --secondary-color: #65af6f;">
<img src="assets/images/image11.jpg" alt="Sample Image" />
<figcaption class="c4-layout-top-left">
<div class="c4-izmir-icon-wrapper c4-reveal-right">
<i class="fas fa-link fa-2x"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-left c4-gradient-top-right c4-image-pan-left" style="--primary-color: #f5af19; --secondary-color: #f12711;">
<img src="assets/images/image12.jpg" alt="Sample Image" />
<figcaption class="c4-layout-center-center">
<div class="c4-izmir-title-wrapper c4-reveal-left">
<h2 class="c4-izmir-title">Lorem ipsum</h2>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-corners-1 c4-gradient-bottom-left c4-image-zoom-out" style="--primary-color: #16A085; --secondary-color: #F4D03F;--border-width: 6px;">
<img src="assets/images/image14.jpg" alt="Sample Image" />
<figcaption class="c4-layout-center-center">
<div class="c4-izmir-icon-wrapper c4-fade c4-delay-300">
<i class="fas fa-plus fa-3x"></i>
</div>
</figcaption>
</figure>
</div>
<div class="col-item">
<figure class="c4-izmir c4-border-vert c4-gradient-top c4-image-zoom-in" style="--primary-color: #4D516C; --secondary-color: #73799F;">
<img src="assets/images/image13.jpg" alt="Sample Image" />
<figcaption class="c4-layout-center-center">
<div class="c4-izmir-title-wrapper c4-fade c4-delay-300">
<h2 class="c4-izmir-title">Donec nec justo</h2>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</body>
</html>