D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
vitalityhealth
/
public_html
/
superadmin
/
Filename :
ui-elements-animations-hover.html
back
Copy
<!doctype html><html class="fixed"> <head> <!-- Basic --> <meta charset="UTF-8"> <title>On Hover Animations | Porto Admin - Responsive HTML5 Template</title> <meta name="keywords" content="HTML5 Admin Template"> <meta name="description" content="Porto Admin - Responsive HTML5 Template"> <meta name="author" content="okler.net"> <!-- Mobile Metas --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- Web Fonts --> <link href="../../../css?family=Poppins:300,400,500,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css"> <!-- Vendor CSS --> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="vendor/animate/animate.compat.css"> <!-- Hover CSS - Demo Purpose Only --> <style> [class^="hvr-"] { /*display: inline-block;*/ /*vertical-align: middle;*/ background: #e1e1e1; color: #666; cursor: pointer; line-height: 1.2em; margin: .4em; padding: 1em; text-decoration: none; /* Prevent highlight colour when element is tapped */ -webkit-tap-highlight-color: rgba(0,0,0,0); } </style> <link rel="stylesheet" href="vendor/hover/hover.css"> <link rel="stylesheet" href="vendor/font-awesome/css/all.min.css"> <link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css"> <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css"> <link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css"> <!-- Specific Page Vendor CSS --> <!-- Theme CSS --> <link rel="stylesheet" href="css/theme.css"> <!-- Theme Custom CSS --> <link rel="stylesheet" href="css/custom.css"> <!-- Head Libs --> <script src="vendor/modernizr/modernizr.js"></script> <script src="master/style-switcher/style.switcher.localstorage.js"></script> </head> <body> <section class="body"> <!-- start: header --> <header class="header"> <div class="logo-container"> <a href="index.htm" class="logo"> <img src="img/logo.png" width="75" height="35" alt="Porto Admin"> </a> <div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened"> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div> </div> <!-- start: search & user box --> <div class="header-right"> <form action="pages-search-results.html" class="search nav-form"> <div class="input-group"> <input type="text" class="form-control" name="q" id="q" placeholder="Search..."> <button class="btn btn-default" type="submit"><i class="bx bx-search"></i></button> </div> </form> <span class="separator"></span> <ul class="notifications"> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-list-ol"></i> <span class="badge">3</span> </a> <div class="dropdown-menu notification-menu large"> <div class="notification-title"> <span class="float-end badge badge-default">3</span> Tasks </div> <div class="content"> <ul> <li> <p class="clearfix mb-1"> <span class="message float-start">Generating Sales Report</span> <span class="message float-end text-dark">60%</span> </p> <div class="progress progress-xs light"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </li> <li> <p class="clearfix mb-1"> <span class="message float-start">Importing Contacts</span> <span class="message float-end text-dark">98%</span> </p> <div class="progress progress-xs light"> <div class="progress-bar" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" style="width: 98%;"></div> </div> </li> <li> <p class="clearfix mb-1"> <span class="message float-start">Uploading something big</span> <span class="message float-end text-dark">33%</span> </p> <div class="progress progress-xs light mb-1"> <div class="progress-bar" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div> </div> </li> </ul> </div> </div> </li> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-envelope"></i> <span class="badge">4</span> </a> <div class="dropdown-menu notification-menu"> <div class="notification-title"> <span class="float-end badge badge-default">230</span> Messages </div> <div class="content"> <ul> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Doe Junior" class="rounded-circle"> </figure> <span class="title">Joseph Doe</span> <span class="message">Lorem ipsum dolor sit.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Junior" class="rounded-circle"> </figure> <span class="title">Joseph Junior</span> <span class="message truncate">Truncated message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam, nec venenatis risus. Vestibulum blandit faucibus est et malesuada. Sed interdum cursus dui nec venenatis. Pellentesque non nisi lobortis, rutrum eros ut, convallis nisi. Sed tellus turpis, dignissim sit amet tristique quis, pretium id est. Sed aliquam diam diam, sit amet faucibus tellus ultricies eu. Aliquam lacinia nibh a metus bibendum, eu commodo eros commodo. Sed commodo molestie elit, a molestie lacus porttitor id. Donec facilisis varius sapien, ac fringilla velit porttitor et. Nam tincidunt gravida dui, sed pharetra odio pharetra nec. Duis consectetur venenatis pharetra. Vestibulum egestas nisi quis elementum elementum.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joe Junior" class="rounded-circle"> </figure> <span class="title">Joe Junior</span> <span class="message">Lorem ipsum dolor sit.</span> </a> </li> <li> <a href="#" class="clearfix"> <figure class="image"> <img src="img/!sample-user.jpg" alt="Joseph Junior" class="rounded-circle"> </figure> <span class="title">Joseph Junior</span> <span class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam.</span> </a> </li> </ul> <hr> <div class="text-end"> <a href="#" class="view-more">View All</a> </div> </div> </div> </li> <li> <a href="#" class="dropdown-toggle notification-icon" data-bs-toggle="dropdown"> <i class="bx bx-bell"></i> <span class="badge">3</span> </a> <div class="dropdown-menu notification-menu"> <div class="notification-title"> <span class="float-end badge badge-default">3</span> Alerts </div> <div class="content"> <ul> <li> <a href="#" class="clearfix"> <div class="image"> <i class="fas fa-thumbs-down bg-danger text-light"></i> </div> <span class="title">Server is Down!</span> <span class="message">Just now</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="image"> <i class="bx bx-lock bg-warning text-light"></i> </div> <span class="title">User Locked</span> <span class="message">15 minutes ago</span> </a> </li> <li> <a href="#" class="clearfix"> <div class="image"> <i class="fas fa-signal bg-success text-light"></i> </div> <span class="title">Connection Restaured</span> <span class="message">10/10/2021</span> </a> </li> </ul> <hr> <div class="text-end"> <a href="#" class="view-more">View All</a> </div> </div> </div> </li> </ul> <span class="separator"></span> <div id="userbox" class="userbox"> <a href="#" data-bs-toggle="dropdown"> <figure class="profile-picture"> <img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg"> </figure> <div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@okler.com"> <span class="name">John Doe Junior</span> <span class="role">Administrator</span> </div> <i class="fa custom-caret"></i> </a> <div class="dropdown-menu"> <ul class="list-unstyled mb-2"> <li class="divider"></li> <li> <a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a> </li> <li> <a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a> </li> <li> <a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a> </li> </ul> </div> </div> </div> <!-- end: search & user box --> </header> <!-- end: header --> <div class="inner-wrapper"> <!-- start: sidebar --> <aside id="sidebar-left" class="sidebar-left"> <div class="sidebar-header"> <div class="sidebar-title"> Navigation </div> <div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle"> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div> </div> <div class="nano"> <div class="nano-content"> <nav id="menu" class="nav-main" role="navigation"> <ul class="nav nav-main"> <li> <a class="nav-link" href="layouts-default.html"> <i class="bx bx-home-alt" aria-hidden="true"></i> <span>Dashboard</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-cart-alt" aria-hidden="true"></i> <span>eCommerce</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ecommerce-dashboard.html"> Dashboard </a> </li> <li> <a class="nav-link" href="ecommerce-products-list.html"> Products List </a> </li> <li> <a class="nav-link" href="ecommerce-products-form.html"> Products Form </a> </li> <li> <a class="nav-link" href="ecommerce-category-list.html"> Categories List </a> </li> <li> <a class="nav-link" href="ecommerce-category-form.html"> Category Form </a> </li> <li> <a class="nav-link" href="ecommerce-coupons-list.html"> Coupons List </a> </li> <li> <a class="nav-link" href="ecommerce-coupons-form.html"> Coupons Form </a> </li> <li> <a class="nav-link" href="ecommerce-orders-list.html"> Orders List </a> </li> <li> <a class="nav-link" href="ecommerce-orders-detail.html"> Orders Detail </a> </li> <li> <a class="nav-link" href="ecommerce-customers-list.html"> Customers List </a> </li> <li> <a class="nav-link" href="ecommerce-customers-form.html"> Customers Form </a> </li> </ul> </li> <li> <a class="nav-link" href="mailbox-folder.html"> <span class="float-end badge badge-primary">182</span> <i class="bx bx-envelope" aria-hidden="true"></i> <span>Mailbox</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-layout" aria-hidden="true"></i> <span>Layouts</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="index.html"> Landing Page </a> </li> <li> <a class="nav-link" href="layouts-default.html"> Default </a> </li> <li> <a class="nav-link" href="layouts-modern.html"> Modern </a> </li> <li class="nav-parent"> <a> Boxed </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-boxed.html"> Static Header </a> </li> <li> <a class="nav-link" href="layouts-boxed-fixed-header.html"> Fixed Header </a> </li> </ul> </li> <li class="nav-parent"> <a> Horizontal Menu Header </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-header-menu.html"> Pills </a> </li> <li> <a class="nav-link" href="layouts-header-menu-stripe.html"> Stripe </a> </li> <li> <a class="nav-link" href="layouts-header-menu-top-line.html"> Top Line </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-dark.html"> Dark </a> </li> <li> <a class="nav-link" href="layouts-dark-header.html"> Dark Header </a> </li> <li> <a class="nav-link" href="layouts-two-navigations.html"> Two Navigations </a> </li> <li class="nav-parent"> <a> Tab Navigation </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-tab-navigation-dark.html"> Tab Navigation Dark </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation.html"> Tab Navigation Light </a> </li> <li> <a class="nav-link" href="layouts-tab-navigation-boxed.html"> Tab Navigation Boxed </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-light-sidebar.html"> Light Sidebar </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-collapsed.html"> Left Sidebar Collapsed </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-scroll.html"> Left Sidebar Scroll </a> </li> <li class="nav-parent"> <a> Left Sidebar Big Icons </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons.html"> Left Sidebar Big Icons Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-big-icons-light.html"> Left Sidebar Big Icons Light </a> </li> </ul> </li> <li class="nav-parent"> <a> Left Sidebar Panel </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-left-sidebar-panel.html"> Left Sidebar Panel Dark </a> </li> <li> <a class="nav-link" href="layouts-left-sidebar-panel-light.html"> Left Sidebar Panel Light </a> </li> </ul> </li> <li class="nav-parent"> <a> Left Sidebar Sizes </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="layouts-sidebar-sizes-xs.html"> Left Sidebar XS </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-sm.html"> Left Sidebar SM </a> </li> <li> <a class="nav-link" href="layouts-sidebar-sizes-md.html"> Left Sidebar MD </a> </li> </ul> </li> <li> <a class="nav-link" href="layouts-square-borders.html"> Square Borders </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-file" aria-hidden="true"></i> <span>Pages</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="pages-signup.html"> Sign Up </a> </li> <li> <a class="nav-link" href="pages-signin.html"> Sign In </a> </li> <li> <a class="nav-link" href="pages-recover-password.html"> Recover Password </a> </li> <li> <a class="nav-link" href="pages-lock-screen.html"> Locked Screen </a> </li> <li> <a class="nav-link" href="pages-user-profile.html"> User Profile </a> </li> <li> <a class="nav-link" href="pages-session-timeout.html"> Session Timeout </a> </li> <li> <a class="nav-link" href="pages-calendar.html"> Calendar </a> </li> <li> <a class="nav-link" href="pages-timeline.html"> Timeline </a> </li> <li> <a class="nav-link" href="pages-media-gallery.html"> Media Gallery </a> </li> <li> <a class="nav-link" href="pages-invoice.html"> Invoice </a> </li> <li> <a class="nav-link" href="pages-blank.html"> Blank Page </a> </li> <li> <a class="nav-link" href="pages-404.html"> 404 </a> </li> <li> <a class="nav-link" href="pages-500.html"> 500 </a> </li> <li> <a class="nav-link" href="pages-log-viewer.html"> Log Viewer </a> </li> <li> <a class="nav-link" href="pages-search-results.html"> Search Results </a> </li> </ul> </li> <li class="nav-parent nav-expanded nav-active"> <a class="nav-link" href="#"> <i class="bx bx-cube" aria-hidden="true"></i> <span>UI Elements</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-typography.html"> Typography </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Icons <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-1"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-icons-elusive.html"> Elusive </a> </li> <li> <a class="nav-link" href="ui-elements-icons-font-awesome.html"> Font Awesome </a> </li> <li> <a class="nav-link" href="ui-elements-icons-line-icons.html"> Line Icons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-meteocons.html"> Meteocons </a> </li> <li> <a class="nav-link" href="ui-elements-icons-box-icons.html"> Box Icons </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-tabs.html"> Tabs </a> </li> <li> <a class="nav-link" href="ui-elements-cards.html"> Cards </a> </li> <li> <a class="nav-link" href="ui-elements-widgets.html"> Widgets </a> </li> <li> <a class="nav-link" href="ui-elements-portlets.html"> Portlets </a> </li> <li> <a class="nav-link" href="ui-elements-buttons.html"> Buttons </a> </li> <li> <a class="nav-link" href="ui-elements-alerts.html"> Alerts </a> </li> <li> <a class="nav-link" href="ui-elements-notifications.html"> Notifications </a> </li> <li> <a class="nav-link" href="ui-elements-modals.html"> Modals </a> </li> <li> <a class="nav-link" href="ui-elements-lightbox.html"> Lightbox </a> </li> <li> <a class="nav-link" href="ui-elements-progressbars.html"> Progress Bars </a> </li> <li> <a class="nav-link" href="ui-elements-sliders.html"> Sliders </a> </li> <li> <a class="nav-link" href="ui-elements-carousels.html"> Carousels </a> </li> <li> <a class="nav-link" href="ui-elements-accordions.html"> Accordions </a> </li> <li> <a class="nav-link" href="ui-elements-toggles.html"> Toggles </a> </li> <li> <a class="nav-link" href="ui-elements-nestable.html"> Nestable </a> </li> <li> <a class="nav-link" href="ui-elements-tree-view.html"> Tree View </a> </li> <li> <a class="nav-link" href="ui-elements-scrollable.html"> Scrollable </a> </li> <li> <a class="nav-link" href="ui-elements-grid-system.html"> Grid System </a> </li> <li> <a class="nav-link" href="ui-elements-charts.html"> Charts </a> </li> <li class="nav-parent nav-expanded nav-active"> <a class="nav-link" href="#"> Animations <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-2"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-animations-appear.html"> Appear </a> </li> <li class="nav-active"> <a class="nav-link" href="ui-elements-animations-hover.html"> Hover </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Loading <span class="mega-sub-nav-toggle toggled float-end" data-toggle="collapse" data-target=".mega-sub-nav-sub-menu-3"></span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="ui-elements-loading-overlay.html"> Overlay </a> </li> <li> <a class="nav-link" href="ui-elements-loading-progress.html"> Progress </a> </li> </ul> </li> <li> <a class="nav-link" href="ui-elements-extra.html"> Extra </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-map" aria-hidden="true"></i> <span>Maps</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="maps-google-maps.html"> Basic </a> </li> <li> <a class="nav-link" href="maps-google-maps-builder.html"> Map Builder </a> </li> <li> <a class="nav-link" href="maps-vector.html"> Vector </a> </li> </ul> </li> <li> <a class="nav-link" href="extra-ajax-made-easy.html"> <i class="bx bx-loader-circle" aria-hidden="true"></i> <span>Ajax</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-detail" aria-hidden="true"></i> <span>Forms</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="forms-basic.html"> Basic </a> </li> <li> <a class="nav-link" href="forms-advanced.html"> Advanced </a> </li> <li> <a class="nav-link" href="forms-validation.html"> Validation </a> </li> <li> <a class="nav-link" href="forms-layouts.html"> Layouts </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-table" aria-hidden="true"></i> <span>Tables</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="tables-basic.html"> Basic </a> </li> <li> <a class="nav-link" href="tables-advanced.html"> Advanced </a> </li> <li> <a class="nav-link" href="tables-responsive.html"> Responsive </a> </li> <li> <a class="nav-link" href="tables-editable.html"> Editable </a> </li> <li> <a class="nav-link" href="tables-ajax.html"> Ajax </a> </li> <li> <a class="nav-link" href="tables-pricing.html"> Pricing </a> </li> </ul> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <i class="bx bx-collection" aria-hidden="true"></i> <span>Menu Levels</span> </a> <ul class="nav nav-children"> <li> <a> First Level </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Second Level </a> <ul class="nav nav-children"> <li> <a> Second Level Link #1 </a> </li> <li> <a> Second Level Link #2 </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> Third Level </a> <ul class="nav nav-children"> <li> <a> Third Level Link #1 </a> </li> <li> <a> Third Level Link #2 </a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a class="nav-link" href="http://themeforest.net/item/porto-responsive-html5-template/4106987?ref=Okler"> <i class="bx bx-window-alt" aria-hidden="true"></i> <span>Front-End <em class="not-included">(Not Included)</em></span> </a> </li> <li> <a class="nav-link" href="https://www.okler.net/forums/topic/porto-admin-changelog/"> <i class="bx bx-book-alt" aria-hidden="true"></i> <span>Changelog</span> </a> </li> </ul> </nav> <hr class="separator"> <div class="sidebar-widget widget-tasks"> <div class="widget-header"> <h6>Projects</h6> <div class="widget-toggle">+</div> </div> <div class="widget-content"> <ul class="list-unstyled m-0"> <li><a href="#">Porto HTML5 Template</a></li> <li><a href="#">Tucson Template</a></li> <li><a href="#">Porto Admin</a></li> </ul> </div> </div> <hr class="separator"> <div class="sidebar-widget widget-stats"> <div class="widget-header"> <h6>Company Stats</h6> <div class="widget-toggle">+</div> </div> <div class="widget-content"> <ul> <li> <span class="stats-title">Stat 1</span> <span class="stats-complete">85%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"> <span class="sr-only">85% Complete</span> </div> </div> </li> <li> <span class="stats-title">Stat 2</span> <span class="stats-complete">70%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete</span> </div> </div> </li> <li> <span class="stats-title">Stat 3</span> <span class="stats-complete">2%</span> <div class="progress"> <div class="progress-bar progress-bar-primary progress-without-number" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> <span class="sr-only">2% Complete</span> </div> </div> </li> </ul> </div> </div> </div> <script> // Maintain Scroll Position if (typeof localStorage !== 'undefined') { if (localStorage.getItem('sidebar-left-position') !== null) { var initialPosition = localStorage.getItem('sidebar-left-position'), sidebarLeft = document.querySelector('#sidebar-left .nano-content'); sidebarLeft.scrollTop = initialPosition; } } </script> </div> </aside> <!-- end: sidebar --> <section role="main" class="content-body"> <header class="page-header"> <h2>On Hover Animations</h2> <div class="right-wrapper text-end"> <ol class="breadcrumbs"> <li> <a href="index.html"> <i class="bx bx-home-alt"></i> </a> </li> <li><span>UI Elements</span></li> <li><span>Animations</span></li> <li><span>Hover</span></li> </ol> <a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fas fa-chevron-left"></i></a> </div> </header> <!-- start: page --> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">2D Transitions</h2> </header> <div class="card-body"> <span class="hvr-grow">Grow</span> <span class="hvr-shrink">Shrink</span> <span class="hvr-pulse">Pulse</span> <span class="hvr-pulse-grow">Pulse Grow</span> <span class="hvr-pulse-shrink">Pulse Shrink</span> <span class="hvr-push">Push</span> <span class="hvr-pop">Pop</span> <span class="hvr-bounce-in">Bounce In</span> <span class="hvr-bounce-out">Bounce Out</span> <span class="hvr-rotate">Rotate</span> <span class="hvr-grow-rotate">Grow Rotate</span> <span class="hvr-float">Float</span> <span class="hvr-sink">Sink</span> <span class="hvr-bob">Bob</span> <span class="hvr-hang">Hang</span> <span class="hvr-skew">Skew</span> <span class="hvr-skew-forward">Skew Forward</span> <span class="hvr-skew-backward">Skew Backward</span> <span class="hvr-wobble-horizontal">Wobble Horizontal</span> <span class="hvr-wobble-vertical">Wobble Vertical</span> <span class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</span> <span class="hvr-wobble-to-top-right">Wobble To Top Right</span> <span class="hvr-wobble-top">Wobble Top</span> <span class="hvr-wobble-bottom">Wobble Bottom</span> <span class="hvr-wobble-skew">Wobble Skew</span> <span class="hvr-buzz">Buzz</span> <span class="hvr-buzz-out">Buzz Out</span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Background Transitions</h2> </header> <div class="card-body"> <span class="hvr-fade">Fade</span> <span class="hvr-back-pulse">Back Pulse</span> <span class="hvr-sweep-to-right">Sweep To Right</span> <span class="hvr-sweep-to-left">Sweep To Left</span> <span class="hvr-sweep-to-bottom">Sweep To Bottom</span> <span class="hvr-sweep-to-top">Sweep To Top</span> <span class="hvr-bounce-to-right">Bounce To Right</span> <span class="hvr-bounce-to-left">Bounce To Left</span> <span class="hvr-bounce-to-bottom">Bounce To Bottom</span> <span class="hvr-bounce-to-top">Bounce To Top</span> <span class="hvr-radial-out">Radial Out</span> <span class="hvr-radial-in">Radial In</span> <span class="hvr-rectangle-in">Rectangle In</span> <span class="hvr-rectangle-out">Rectangle Out</span> <span class="hvr-shutter-in-horizontal">Shutter In Horizontal</span> <span class="hvr-shutter-out-horizontal">Shutter Out Horizontal</span> <span class="hvr-shutter-in-vertical">Shutter In Vertical</span> <span class="hvr-shutter-out-vertical">Shutter Out Vertical</span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Icons</h2> </header> <div class="card-body"> <span class="hvr-icon-back"><i class="fas fa-check hvr-icon"></i> Icon Back</span> <span class="hvr-icon-forward">Icon Forward <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-down">Icon Down <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-up">Icon Up <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-spin">Icon Spin <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-drop">Icon Drop <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-fade">Icon Fade <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-float-away">Icon Float Away <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-sink-away">Icon Sink Away <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-grow">Icon Grow <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-shrink">Icon Shrink <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-pulse">Icon Pulse <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-pulse-grow">Icon Pulse Grow <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-pulse-shrink">Icon Pulse Shrink <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-push">Icon Push <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-pop">Icon Pop <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-bounce">Icon Bounce <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-rotate">Icon Rotate <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-grow-rotate">Icon Grow Rotate <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-float">Icon Float <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-sink">Icon Sink <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-bob">Icon Bob <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-hang">Icon Hang <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-wobble-horizontal">Icon Wobble Horizontal <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-wobble-vertical">Icon Wobble Vertical <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-buzz">Icon Buzz <i class="fas fa-check hvr-icon"></i></span> <span class="hvr-icon-buzz-out">Icon Buzz Out <i class="fas fa-check hvr-icon"></i></span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Border Transitions</h2> </header> <div class="card-body"> <span class="hvr-border-fade">Border Fade</span> <span class="hvr-hollow">Hollow</span> <span class="hvr-trim">Trim</span> <span class="hvr-ripple-out">Ripple Out</span> <span class="hvr-ripple-in">Ripple In</span> <span class="hvr-outline-out">Outline Out</span> <span class="hvr-outline-in">Outline In</span> <span class="hvr-round-corners">Round Corners</span> <span class="hvr-underline-from-left">Underline From Left</span> <span class="hvr-underline-from-center">Underline From Center</span> <span class="hvr-underline-from-right">Underline From Right</span> <span class="hvr-reveal">Reveal</span> <span class="hvr-underline-reveal">Underline Reveal</span> <span class="hvr-overline-reveal">Overline Reveal</span> <span class="hvr-overline-from-left">Overline From Left</span> <span class="hvr-overline-from-center">Overline From Center</span> <span class="hvr-overline-from-right">Overline From Right</span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Shadow and Glow Transitions</h2> </header> <div class="card-body"> <span class="hvr-shadow">Shadow</span> <span class="hvr-grow-shadow">Grow Shadow</span> <span class="hvr-float-shadow">Float Shadow</span> <span class="hvr-glow">Glow</span> <span class="hvr-shadow-radial">Shadow Radial</span> <span class="hvr-box-shadow-outset">Box Shadow Outset</span> <span class="hvr-box-shadow-inset">Box Shadow Inset</span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Speech Bubbles</h2> </header> <div class="card-body"> <span class="hvr-bubble-top">Bubble Top</span> <span class="hvr-bubble-right">Bubble Right</span> <span class="hvr-bubble-bottom">Bubble Bottom</span> <span class="hvr-bubble-left">Bubble Left</span> <span class="hvr-bubble-float-top">Bubble Float Top</span> <span class="hvr-bubble-float-end">Bubble Float Right</span> <span class="hvr-bubble-float-bottom">Bubble Float Bottom</span> <span class="hvr-bubble-float-start">Bubble Float Left</span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Curls</h2> </header> <div class="card-body"> <span class="hvr-curl-top-left">Curl Top Left</span> <span class="hvr-curl-top-right">Curl Top Right</span> <span class="hvr-curl-bottom-right">Curl Bottom Right</span> <span class="hvr-curl-bottom-left">Curl Bottom Left</span> </div> </section> </div> </div> <div class="row"> <div class="col-md-12"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle=""></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss=""></a> </div> <h2 class="card-title">Details</h2> </header> <div class="card-body"> <h3 class="text-dark">Customising Colors</h3> <p>We will have to customize the color you want to use, since it uses the hover for doing the effect. The best way to know what to change is taking a look at the hover.css and see what the class does on <code>:hover</code>.</p> <hr> <h3 class="text-dark">Using FontAwesome with Icon Effects</h3> <p>Hover.css icons are added to elements via the <code>:before</code> pseudo-element.</p> <p>By default Hover.css puts the icon for you, but you can use a customized icon if you set the element class like this: <code>hvr-icon-forward fa-chevron-left</code></p> <p>Examples:</p> <div> <span class="hvr-icon-forward">Icon Forward</span> <span class="hvr-icon-forward fa-chevron-right">Icon Forward Custom</span> </div> <hr> <h3 class="text-dark">A Deeper Look at the CSS (and some Hacks)</h3> <p>All hover.cs effects are given default CSS properties that aren’t directly related to the effect. These default properties give the most desired wide-spread results, but nonetheless you may wish to change them on your own website.</p> <h4 class="text-dark">display: inline-block</h4> <p>A <code>display</code> property is often required for an effect to work. By default, hover.css sets all elements to <code>display: inline-block</code>. You may need to change this to <code>display: block</code> or <code>display: inline</code>depending on your requirements. If the element you’re applying the effect to already has a <code>display</code> property, then the one applied by the effect can be removed.</p> <h4 class="text-dark">transform: translateZ(0)</h4> <p><code>transform: translateZ(0)</code> is known as a “performance hack”. It is often used with CSS3 transforms to improve the performance of those transforms on mobile and tablet devices.</p> <h4 class="text-dark">box-shadow: 0 0 1px rgba(0, 0, 0, 0)</h4> <p>When viewing CSS3 transformed elements on mobile/tablet devices, the edges can sometimes look jagged or a slightly different colour. By applying <code>box-shadow: 0 0 1px rgba(0, 0, 0, 0)</code>, an element is given a transparent box shadow, which causes the edges of that element to look smoother.</p> <hr> <h3 class="text-dark">Browser Support</h3> <p>Many hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements. Older browsers still in use today may not fully support effects making use of these technologies.</p> <ul> <li>Transforms are not supported below Internet Explorer 10</li> <li>Transitions and Animations are not supported below Internet Explorer 9</li> <li>Psuedo-elements are not supported below Internet Explorer 8</li> </ul> <p>Aside from the above mentioned browsers, hover.css is supported across all major browsers. Please see <a href="http://caniuse.com">caniuse.com</a> for full support for many web technologies and test your webpages accordingly.</p> </div> </section> </div> </div> <!-- end: page --> </section> </div> <aside id="sidebar-right" class="sidebar-right"> <div class="nano"> <div class="nano-content"> <a href="#" class="mobile-close d-md-none"> Collapse <i class="fas fa-chevron-right"></i> </a> <div class="sidebar-right-wrapper"> <div class="sidebar-widget widget-calendar"> <h6>Upcoming Tasks</h6> <div data-plugin-datepicker="" data-plugin-skin="dark"></div> <ul> <li> <time datetime="2021-04-19T00:00+00:00">04/19/2021</time> <span>Company Meeting</span> </li> </ul> </div> <div class="sidebar-widget widget-friends"> <h6>Friends</h6> <ul> <li class="status-online"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-online"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-offline"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> <li class="status-offline"> <figure class="profile-picture"> <img src="img/!sample-user.jpg" alt="Joseph Doe" class="rounded-circle"> </figure> <div class="profile-info"> <span class="name">Joseph Doe Junior</span> <span class="title">Hey, how are you?</span> </div> </li> </ul> </div> </div> </div> </div> </aside> </section> <!-- Vendor --> <script src="vendor/jquery/jquery.js"></script> <script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script> <script src="vendor/jquery-cookie/jquery.cookie.js"></script> <script src="master/style-switcher/style.switcher.js"></script> <script src="vendor/popper/umd/popper.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script src="vendor/common/common.js"></script> <script src="vendor/nanoscroller/nanoscroller.js"></script> <script src="vendor/magnific-popup/jquery.magnific-popup.js"></script> <script src="vendor/jquery-placeholder/jquery.placeholder.js"></script> <!-- Specific Page Vendor --> <script src="vendor/jquery-appear/jquery.appear.js"></script> <!-- Theme Base, Components and Settings --> <script src="js/theme.js"></script> <!-- Theme Custom --> <script src="js/custom.js"></script> <!-- Theme Initialization Files --> <script src="js/theme.init.js"></script> <!-- Analytics to Track Preview Website --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-42715764-8', 'auto'); ga('send', 'pageview'); </script> </body> </html>