GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ciar4n → Izmir

ciar4n / Izmir

Licence: mit
Izmir - An image hover mini CSS library

Labels

cssanimationcss-animations

Projects that are alternatives of or similar to Izmir

animusjs
🎆 AnimusJS is the solution for combine JS and CSS animations.
Stars: ✭ 42 (-85.16%)
Mutual labels:  css-animations
MERN-BUS-APP
This is a MFRP (My first Real Project) assigned to me during my internship at Cognizant. Made with MERN Stack technology.
Stars: ✭ 92 (-67.49%)
Mutual labels:  css-animations
skelet
Skelet.css a contemporary CSS framework. The basics to get started.
Stars: ✭ 69 (-75.62%)
Mutual labels:  css-animations
vov
✨ vov.css animations for shiny
Stars: ✭ 23 (-91.87%)
Mutual labels:  css-animations
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: ✭ 564 (+99.29%)
Mutual labels:  css-animations
aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-95.41%)
Mutual labels:  css-animations
hexa
Awesome Css Animation. The documentation =>
Stars: ✭ 32 (-88.69%)
Mutual labels:  css-animations
Html5 Canvas Animation
🚀 3D lines animation with three.js
Stars: ✭ 278 (-1.77%)
Mutual labels:  css-animations
smoothr
A custom React router that leverages the Web Animations API and CSS animations.
Stars: ✭ 28 (-90.11%)
Mutual labels:  css-animations
css-collection
🧙‍♂️ CSS芸人への道（CSSでつくったもの集）| I want to be CSS Magician
Stars: ✭ 82 (-71.02%)
Mutual labels:  css-animations
web-animation-club
CSS controlled animations with transitionEnd, onTransitionEnd, animationend, onAnimationEnd events and frame throwing. Tiny javascript library with cross-browser methods to handle css animation/transition callbacks and event loop frame throwing. 📚🖥️📱
Stars: ✭ 52 (-81.63%)
Mutual labels:  css-animations
nglp-angular-material-landing-page
NGLP is an Angular Material Landing Page.
Stars: ✭ 32 (-88.69%)
Mutual labels:  css-animations
Chat-Bot
Chatbot – is a computer program that simulates a natural human conversation. Users communicate with a chatbot via the chat interface or by voice, like how they would talk to a real person.
Stars: ✭ 26 (-90.81%)
Mutual labels:  css-animations
react-collapsed
A React custom-hook for creating flexible and accessible expand/collapse components.
Stars: ✭ 392 (+38.52%)
Mutual labels:  css-animations
MeeInk
Material Design click effect
Stars: ✭ 33 (-88.34%)
Mutual labels:  css-animations
Landing-Page-Animation
Landing page animation made using CSS
Stars: ✭ 45 (-84.1%)
Mutual labels:  css-animations
Actuate
One line easy actuation of CSS animation sequences
Stars: ✭ 42 (-85.16%)
Mutual labels:  css-animations
You Need To Know Css
💄CSS tricks for web developers~
Stars: ✭ 3,777 (+1234.63%)
Mutual labels:  css-animations
React Magic
A collection of magic animations for react components.
Stars: ✭ 264 (-6.71%)
Mutual labels:  css-animations
learn-css-animation
Learn CSS animation with fun. It is simple, easy to use, and fun to learn.
Stars: ✭ 54 (-80.92%)
Mutual labels:  css-animations
View All Similar Projects ➔

Introduction

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.

Features

  • 1000's of possible style combinations
  • 20 animated border effects
  • 9 animated image effect
  • 12 animated text effects
  • Overlay style classes
  • Animation delay classes
  • Text layout classes
  • Collection of custom properties to further custom style your element
    • Border width
    • Border margin
    • Border color
    • Primary color
    • Secondary color
    • Text color
    • Image hover opacity
    • Image hover color
    • Image hover gradient
  • Accesible (hover triggered on focus)
  • Ultra small file size (2KB GZipped)
  • Complete documentation

NPM

npm install @ciar4n/izmir

Setup

  1. Extract and copy the CSS files in the root of your download folder to your projects CSS folder.
  2. Include a link to the CSS your document's <head> tags
<link rel="stylesheet" href="css/izmir.min.css">
  1. Use the following markup to create the most basic instance of an image hover element..
<figure class="c4-izmir">
  <img src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image">
  <figcaption>
      <h3>
        Some sample text
      </h3>
    </div>
</figure>

License

Izmir CSS Library is licensed under the MIT license. (http://opensource.org/licenses/MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].