Pure HTML5/CSS3. No jQuery

30 Awesome Effects

Crossbrowser (IE10+, Safari 7+, FF, Chrome, Opera)

Easy to Use and Customize

Overlay Effects, Image Effects, Caption Effects

Effects

Effect #1

Hover it now!

Effect #1

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #2

Hover it now!

Effect #2

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #3

Hover it now!

Effect #3

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #4

Hover it now!

Effect #4

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #5

Hover it now!

Effect #5

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #6

Hover it now!

Effect #6

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #7

Hover it now!

Effect #7

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #8

Hover it now!

Effect #8

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #9

Hover it now!

Effect #9

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #10

Hover it now!

Effect #10

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #11

Hover it now!

Effect #11

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #12

Hover it now!

Effect #12

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #13

Hover it now!

Effect #13

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #14

Hover it now!

Effect #14

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #15

Hover it now!

Effect #15

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #16

Hover it now!

Effect #16

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #17

Hover it now!

Effect #17

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #18

Hover it now!

Effect #18

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #19

Hover it now!

Effect #19

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #20

Hover it now!

Effect #20

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #21

Hover it now!

Effect #21

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #22

Hover it now!

Effect #22

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #23

Hover it now!

Effect #23

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #24

Hover it now!

Effect #24

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #25

Hover it now!

Effect #25

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #26

Hover it now!

Effect #26

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #27

Hover it now!

Effect #27

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #28

Hover it now!

Effect #28

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #29

Hover it now!

Effect #29

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

Effect #30

Hover it now!

Effect #30

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More

How to Use

  • Basic HTML markup. Class "effect" is essential, also class "eff-1" (use instead of "1" number of demo you like most, for example, "eff-22") is essential too.

    <div class="effect eff-1">
      <img src="img/your-own-path" alt="Your own text" />
      <div class="caption">
        <h4>Title is Here</h4>
        <div class="text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
        </div>
        <a class="btn" href="your link" title="View More">View More</a>
      </div>
    </div>
                      
  • Download foxhover.css file. It's better to use minified version (foxhover.min.css), but if you want to change something, use full version (foxhover.css). Both of the files you can find in the foxhover archieve. Put the file you've picked in your project "css" folder.

  • Add the file you've put in your "css" folder to your <head> tag:

    <head>
      <link rel="stylesheet" href="css/foxhover.min.css" />
    </head>
                      
    or
    <head>
      <link rel="stylesheet" href="css/foxhover.css" />
    </head>
                      

Contact Me