@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>Border Animation - 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="Border Animation" /> <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="2B-border-animation.html" /> <meta property="og:url" content="2B-border-animation.html" /> <meta property="og:site_name" content="Izmir" /> <script type="application/ld+json"> {"@type":"WebPage","headline":"Border Animation","url":"2B-border-animation.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">Customisation</a> <ul class="navigation-list-child-list "> <li class="navigation-list-item active"> <a href="2B-border-animation.html" class="navigation-list-link active">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"> <nav class="breadcrumb-nav"> <ol class="breadcrumb-nav-list"> <li class="breadcrumb-nav-list-item"><a href="2A-customisation.html">Customisation</a></li> <li class="breadcrumb-nav-list-item"><span>Border Animation</span></li> </ol> </nav> <div id="main-content" class="page-content" role="main"> <h2 id="hover-border-animation">Hover Border Animation</h2> <p>This CSS library includes selection of animated border styles to choose from. These are applied by adding a border style class to the <code class="highlighter-rouge"><figure></code> tag of your image hover element. In the following example we are applying the <code class="highlighter-rouge">c4-border-vert</code> border hover effect.</p> <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-vert"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"https://source.unsplash.com/WLUHO9A_xik/400x300"</span> <span class="na">alt=</span><span class="s">"Sample Image"</span><span class="nt">></span> <span class="nt"><figcaption></span> // Caption text <span class="nt"></figcaption></span> <span class="nt"></figure></span> </code></pre></div></div> <h3 id="border-classes">Border Classes</h3> <div class="col-3"> <div class="col-item"> <figure class="c4-izmir c4-border-center" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-center</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-vert" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-vert</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-horiz" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-horiz</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-top" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-top</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-bottom" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-bottom</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-left" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-left</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-right" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-right</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-top-left" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-top-left</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-top-right" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-top-right</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-bottom-left" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-bottom-left</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-bottom-right" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-bottom-right</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-corners-1" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-corners-1</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-corners-2" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-corners-2</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-cc-1" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-cc-1</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-ccc-1" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-ccc-1</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-cc-2" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-cc-2</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-ccc-2" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-ccc-2</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-cc-3" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-cc-3</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-ccc-3" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-ccc-3</textarea> </div> <div class="col-item"> <figure class="c4-izmir c4-border-fade" tabindex="0"> <img src="assets/images/image03.jpg" alt="Sample Image" /> <figcaption> </figcaption> </figure> <textarea onclick="this.focus();this.select()" readonly="readonly">c4-border-fade</textarea> </div> </div> </div> </div> </div> </div> </body> </html>