@ciar4n/izmir

<!DOCTYPE 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>Getting Started - 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>  <meta name="generator" content="Jekyll v3.8.6" /> <meta property="og:title" content="Getting Started" /> <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="1A-getting-started.html" /> <meta property="og:url" content="1A-getting-started.html" /> <meta property="og:site_name" content="Izmir" /> <script type="application/ld+json"> {"@type":"WebPage","headline":"Getting Started","url":"1A-getting-started.html","description":"ImageHover CSS Library","@context":"https://schema.org"}</script>  </head> <body> <div class="page-wrap"> <div class="side-bar"> <a href="getting-started.html" class="site-title fs-6 lh-tight">Izmir<span>ImageHover CSS Library</span></a> <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span> <div class="navigation main-nav js-main-nav"> <nav role="navigation" aria-label="Main navigation"> <ul class="navigation-list"> <li class="navigation-list-item"> <a href="demo.html" class="navigation-list-link">Demo</a> </li> <li class="navigation-list-item active"> <a href="1A-getting-started.html" class="navigation-list-link active">Getting Started</a> </li> <li class="navigation-list-item"> <a href="2A-customisation.html" class="navigation-list-link">Customisation</a> <ul class="navigation-list-child-list "> <li class="navigation-list-item "> <a href="2B-border-animation.html" class="navigation-list-link">Border Animation</a> </li> <li class="navigation-list-item "> <a href="2C-image-animation.html" class="navigation-list-link">Image Animation</a> </li> <li class="navigation-list-item "> <a href="2D-text-animation.html" class="navigation-list-link">Text Animation</a> </li> <li class="navigation-list-item "> <a href="2E-overlay-style.html" class="navigation-list-link">Overlay Style</a> </li> <li class="navigation-list-item "> <a href="2G-caption-layout.html" class="navigation-list-link">Caption Layout</a> </li> <li class="navigation-list-item "> <a href="2F-animation-delay.html" class="navigation-list-link">Animation Delay</a> </li> </ul> </li> <li class="navigation-list-item"> <a href="3A-custom-properties.html" class="navigation-list-link">Custom Properties</a> </li> </ul> </nav> <div class="cc-izmir"> <a href="https://codecanyon.net/item/izmir-hover-effects-for-elementor/24704473"> <h3>Get Izmir for Elementor</h3> <p>Add these hover effects to Wordpress using Elementor!</p> <img src="assets/images/izmir-elementor.jpg" alt="Sample Image"> </a> </div> </div> </div> <div class="main-content-wrap js-main-content" tabindex="0"> <div class="page-header"> <div class="main-content"> <div class="search js-search"> <div class="search-input-wrap"> <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search Izmir" aria-label="Search Izmir" autocomplete="off"> <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"> <title>Search</title> <g fill-rule="nonzero"> <path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z" /> <path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z" /> </g> </svg> </div> <div class="js-search-results search-results-wrap"></div> </div> </div> </div> <div class="main-content"> <div id="main-content" class="page-content" role="main"> <h2 id="introduction">Introduction</h2> <p>Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilites. Simply load the CSS library in to your project, add the element markup combined with the style classes of your choice to custom build your perfect image hover effect.</p> <h2 id="features">Features</h2> <ul> <li>1000’s of possible style combinations</li> <li>20 animated border effects</li> <li>9 animated image effect</li> <li>12 animated text effects</li> <li>Overlay style classes</li> <li>Animation delay classes</li> <li>Text layout classes</li> <li>Collection of custom properties to further custom style your element <ul> <li>Border width</li> <li>Border margin</li> <li>Border color</li> <li>Primary color</li> <li>Secondary color</li> <li>Text color</li> <li>Image hover opacity</li> <li>Image hover color</li> <li>Image hover gradient</li> </ul> </li> <li>Accesible (hover triggered on focus)</li> <li>Ultra small file size (2KB GZipped)</li> <li>Complete documentation</li> </ul> <h2 id="installation">Installation</h2> <ol> <li>Extract and copy the CSS files in the root of your download folder to your projects CSS folder.</li> <li>Include a link to the CSS your document’s <code class="highlighter-rouge"><head></code> tags</li> </ol> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"css/izmir.min.css"</span><span class="nt">></span> </code></pre></div></div> <ol> <li>Use the following markup to create the most basic instance of an image hover element..</li> </ol> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><figure</span> <span class="na">class=</span><span class="s">"c4-izmir"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"https://source.unsplash.com/FaPxZ88yZrw/400x300"</span> <span class="na">alt=</span><span class="s">"Sample Image"</span><span class="nt">></span> <span class="nt"><figcaption></span> <span class="nt"><h3></span> Some sample text <span class="nt"></h3></span> <span class="nt"></div></span> <span class="nt"></figure></span> </code></pre></div></div> <figure class="c4-izmir" style="max-width: 380px;"> <img src="assets/images/image04.jpg" alt="Sample Image" /> <figcaption> <h3> Some sample text </h3> </figcaption> </figure> </div> </div> </div> </div> </body> </html>