@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>Customisation - 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="Customisation" /> <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="2A-customisation.html" /> <meta property="og:url" content="2A-customisation.html" /> <meta property="og:site_name" content="Izmir" /> <script type="application/ld+json"> {"@type":"WebPage","headline":"Customisation","url":"2A-customisation.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"> <a href="1A-getting-started.html" class="navigation-list-link">Getting Started</a> </li> <li class="navigation-list-item active"> <a href="2A-customisation.html" class="navigation-list-link active">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="how-to-customise">How to Customise</h2> <p>Image hover elements can be customised by applying a collection of classes within the elements markup. One class can be applied from each of the following categories allowing endless possibilties to customise your Image Hover element to your own taste.</p> <ul> <li>Hover Border Animation</li> <li>Hover Image Animation</li> <li>Hover Text Animation</li> <li>Text Animation Delay</li> <li>Hover Overlay Style</li> <li>Caption Layout</li> </ul> <p>Elements can be customised further by defining custom properties either globally or inline within a single or selected number of elements.</p> <ul> <li>–text-color</li> <li>–primary-color</li> <li>–secondary-color</li> <li>–padding</li> <li>–border-radius</li> <li>–transition-duration</li> <li>–border-margin</li> <li>–border-width</li> <li>–border-color</li> <li>–image-opacity</li> </ul> <h3 id="example">Example</h3> <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 c4-border-bottom-left c4-image-rotate-right c4-gradient-bottom-right"</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">style=</span><span class="s">"--primary-color: #f12711; --secondary-color: #f5af19; --image-opacity: .1;"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"assets/images/image05.jpg"</span> <span class="na">alt=</span><span class="s">"Sample Image"</span><span class="nt">></span> <span class="nt"><figcaption</span> <span class="na">class=</span><span class="s">"c4-layout-bottom-left"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"c4-reveal-right c4-delay-100"</span><span class="nt">></span> <span class="nt"><h3></span> Creative Control <span class="nt"></h3></span> <span class="nt"></div></span> <span class="nt"></figcaption></span> <span class="nt"></figure></span> </code></pre></div></div> <div class="col-2"> <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/image05.jpg" alt="Sample Image" /> <figcaption class="c4-layout-bottom-left"> <div class="c4-reveal-right c4-delay-100"> <h3> Creative Control </h3> </div> </figcaption> </figure> </div> <hr> <h2 class="text-delta">Table of contents</h2> <ul> <li> <a href="2B-border-animation.html">Border Animation</a> </li> <li> <a href="2C-image-animation.html">Image Animation</a> </li> <li> <a href="2D-text-animation.html">Text Animation</a> </li> <li> <a href="2E-overlay-style.html">Overlay Style</a> </li> <li> <a href="2F-animation-delay.html">Animation Delay</a> </li> <li> <a href="2G-caption-layout.html">Caption Layout</a> </li> </ul> </div> </div> </div> </div> </body> </html>