0

5 Awesome CSS Hover Effects

5 Awesome CSS Hover Effects, you can copy and paste into your Document.


Hover effects can make your site feel much more Better than Before. Using CSS Animation Tricks In your own implementations.

The effects we’ll be using today all use code that is supported by modern browsers, Like Mozilla and Webkit for the most part. IE support is spotty at best across various versions so be sure to test thoroughly in your own implementation. Fancy hover effects are one of those things that you can usually degrade fairly gracefully so that older browsers still see some change.

This works best when you have a create horizontal image gallery items or Game image icons. That way when you run your mouse across them you get a nice wave effect.

This one is super easy to implement and your gallery image icons. What I did below is just apply a margin to each image and then reduced that margin on hover. The margin starts at 15px, then reduces to only 2px on hover, which makes the image jump up. You could easily use this same effect on text items if they were in a list.

Now follow the code Examples:

1. Image Fade In Example Code:
image glow effect
#containerEx5 {
                background: #333;
                padding: 50px;
                margin-top: 50px;
}
#example5 {
                margin: 0 auto;
                min-height: 300px;
}
#example5 img {
                width: 200px;
                margin: 25px;
                opacity: 0.8;
                border: 10px solid #eee;
                /*Transition*/
                -webkit-transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                /*Reflection*/
                -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#example5 img:hover {
                opacity: 1;
                /*Reflection*/
                -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
                /*Glow*/
                -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
                -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
                box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

2. Crooked Image Example code:
cracked image
#containerEx2 {
  background: #333333;
  padding: 20px;
  margin: 50px 0;
  min-height: 100%;
}
#example2 {
  width: 800px;
  margin: 0 auto;
}
#example2 img {
  margin: 20px;
  border: 5px solid #eee;
  -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
  -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
}
#example2 img:hover {
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);

}

3. Fade Text Example Code:
text fade in
h1 {
  font-size: 20px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  margin: 20px;
  color: #aaa;
}
#example3 {
  width: 730px;
  height: 133px;
  line-height: 0px;
  color: transparent;
  font-size: 50px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
#example3 img {
  float: left;
  margin: 0 15px;
  width: 400px;
}
#example3:hover {
  line-height: 133px;
  color: #575858;
}

4. Zoom example Code:
image zoom
#containerEx4 {
  clear: both;
  width: 300px;
  margin: 0 auto;
  min-height: 600px;
}
#example4 img {
  height: 100px;
  width: 300px;
  margin: 15px 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
}
#example4 img:hover {
  height: 133px;
  width: 400px;
  margin-left: -50px;
}

5. Bump Up example Code:
.example5 img {
  height: 100px;
  width: 100px;
  border: 5px solid #ccc;
  float: left;
  margin: 15px;
  -webkit-transition: margin 0.5s ease-out;
  -moz-transition: margin 0.5s ease-out;
  -o-transition: margin 0.5s ease-out;
}
.example5 img:hover {
  margin-top: 2px;
}

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment