Skip to content

README.md

Latest commit

 

History

History
146 lines (118 loc) · 3.75 KB

README.md

File metadata and controls

146 lines (118 loc) · 3.75 KB

More than 100+ Pure CSS Image Hover Effects Which is very useful for your projects. By using this CSS You Will be able to add Variety of Image hover effects.

Effects You will get:

  • Zoom In & Zoom Out
  • Rotate Right & Left
  • Rotate & Scale
  • Rotate X & Rotate Y
  • Image Opacity
  • Layer Hover
  • Cubic Transition
  • And many more

Demo

HTML Structure:

<div class="ImageWrapper">
            <img src="Your_Image.jpg" alt="">
            <div class="ImageOverlayH"></div>
            <div class="Buttons StyleH">
                <span class="white-rounded"><a href=""><i class="fa fa-search"></i></a>
                </span>
                <span class="white-rounded"><a href=""><i class="fa fa-link"></i></a>
                </span>
            </div>
        </div>

CSS Structure:

.ImageWrapper .ImageOverlayH {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
        bottom: 0;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: all 0.2s ease 0s;
        width: 100%;
    }
    .ImageWrapper:hover .ImageOverlayH {
        opacity: 1;
    }

    .ImageWrapper .StyleH {
        visibility: hidden;
        margin: 0;
        opacity: 0;
        position: absolute;
        text-align: center;
        width: 100%;
        top: 50%;
        margin-top: -20px;
    }
    .ImageWrapper:hover .StyleH {
        opacity: 1;
        visibility: visible;
    }

Using this css hover effects in your pojects is very easy. Before adding this, We Recommend you to add FontAwesome, To grab this pligin you just need go here and follow the structure to use this plugin . After that, to use this css file insert this code before tag in your index.html .

<link rel="stylesheet" href="css/sinister.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

How to Use

First Step

First of all, add a image in your projects file, as bellow. 
<div class="ImageWrapper">
        <img src="YourImage.jpg" alt="">
    </div>

Second Step : Add Overlay Tag

 <div class="ImageWrapper">
        <img src="YourImage.jpg" alt="">
        <div class="ImageOverlayH"></div>
    </div>

Thired Step : Add Hover Style & Buttons

<div class="ImageWrapper">
        <img src="YourImage.jpg" alt="">
        <div class="ImageOverlayH"></div>
        <div class="StyleH">
            <span class="WhiteRounded"><a href=""><i class="fa fa-search"></i></a>
            </span>
            <span class="WhiteRounded"><a href=""><i class="fa fa-link"></i></a>
            </span>
        </div>
    </div>

Fourth Step : Add Hover Style & Buttons

<div class="ImageWrapper">
        <img src="YourImage.jpg" alt="">
        <div class="ImageOverlayH"></div>
        <div class="StyleH">
            <span class="WhiteRounded"><a href=""><i class="fa fa-search"></i></a>
            </span>
            <span class="WhiteRounded"><a href=""><i class="fa fa-link"></i></a>
            </span>
        </div>
    </div>

Last is not last : After doins as above, Your Code Shoud Be Like This:

<div class="ImageWrapper">
        <img src="YourImage.jpg" alt="">
        <div class="ImageOverlayH"></div>
        <div class="StyleH">
            <span class="WhiteRounded"><a href=""><i class="fa fa-search"></i></a>
            </span>
            <span class="WhiteRounded"><a href=""><i class="fa fa-link"></i></a>
            </span>
        </div>
    </div>