Skip to content
Izmir - An image hover mini CSS library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
scss Just some minor tweaks Nov 12, 2019
.gitattributes Initial commit Nov 1, 2019
izmir.min.css Initial commit Nov 1, 2019


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.


  • 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 install @ciar4n/izmir


  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="" alt="Sample Image">
        Some sample text


Izmir CSS Library is licensed under the MIT license. (

You can’t perform that action at this time.