10 Easy Image Hover Effects You Can Copy and Paste
来源:互联网 发布:智能温室数据监测系统 编辑:程序博客网 时间:2024/04/27 13:29
10 Easy Image Hover Effects You Can Copy and Paste
Hover effects are always a fun topic to explore. In the past, we’ve built someawesome examples of CSS hovers that were easy to copy and paste right into your code.
Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.
Sneak Peek
Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building.
Demo: Click here to launch.
Setup
Before we begin creating the individual demos, some basic setup is required. Here’s a chunk of CSS that we’ll be using to dictate the basic appearance of all of the examples.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background
:
#333
;
}
.pic {
border
:
10px
solid
#fff
;
float
:
left
;
height
:
300px
;
width
:
300px
;
margin
:
20px
;
overflow
:
hidden
;
-webkit-box-shadow:
5px
5px
5px
#111
;
box-shadow:
5px
5px
5px
#111
;
}
Most of this is basic stuff: box-sizing allows us to manipulate the box model (feel free to apply more specifically if you don’t like the universal selector), and the pic class gives us a place to toss in some generic styling for each photo.
Zoom and Pan
Our first group of effects involves utilizing some tricks with hidden overflow. By clipping the image to the bounds of a div, we can pull off some pretty cool hovers.
Here’s a demo of the four hover effects in action:
Demo: Click here to launch.
Grow
To begin, we’ll make it so that when the user hovers over the image, the photo enlarges while still staying within its bounds, resulting in a zooming in effect. Here’s the HTML.
HTML
<
div
class
=
"grow pic"
>
<
img
src
=
"http://lorempixel.com/400/400/people/9"
alt
=
"portrait"
>
</
div
>
As you can see, we’re using the “pic” class from before along with a “grow” class. As usual, our images are being served up courtesy of Lorem Pixel. Note that the image we’re using here is 400px by 400px. Now let’s see the CSS.
CSS
/*GROW*/
.grow img {
height
:
300px
;
width
:
300px
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.grow img:hover {
width
:
400px
;
height
:
400px
;
}
What we’ve done here is specifically targeted the image tag, set its height to 300px square and then increased this to 400px square when the user hovers. Again, since we have overflow set to hidden, this will result in a zoom effect.
Shrink
We’ve seen how to grow an image on hover, so let’s reverse that effect and zoom the photo out. The method is pretty much exactly the same, only this time you’ll start with the size at 400px and shrink it to 300px on hover.
HTML
<
div
class
=
"shrink pic"
>
<
img
src
=
"http://lorempixel.com/400/400/nightlife/4"
alt
=
"city"
>
</
div
>
CSS
/*SHRINK*/
.shrink img {
height
:
400px
;
width
:
400px
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.shrink img:hover {
width
:
300px
;
height
:
300px
;
}
Side Pan
The next effect keeps the image the same size throughout, but pans it sideways as the user hovers. As you can see in our kicking example, this is a great way to convey a sense of action.
HTML
<
div
class
=
"sidepan pic"
>
<
img
src
=
"http://lorempixel.com/600/300/sports/8"
alt
=
"kick"
>
</
div
>
Here we are using an image that’s 600px wide, but only 300px tall. Because we’re zooming sideways, we don’t need any extra height to pull off the effect.
CSS
/*SIDEPAN*/
.sidepan img {
margin-left
:
0px
;
-webkit-transition: margin
1
s ease;
-moz-transition: margin
1
s ease;
-o-transition: margin
1
s ease;
-ms-transition: margin
1
s ease;
transition: margin
1
s ease;
}
.sidepan img:hover {
margin-left
:
-200px
;
}
For the pan, we’re not changing the image size like we did last time, but instead using margin to pull the image left on hover. If you want it to move right, use a positive value or margin-right.
Vertical Pan
A vertical pan can be cool as well. Once again, I’ll be using this effect to convey a sense of motion, but this is also great for communicating height if you want to pan up something like a tall building. The cliff in our photo helps push this concept.
HTML
<
div
class
=
"vertpan pic"
>
<
img
src
=
"http://lorempixel.com/300/600/sports/5"
alt
=
"climb"
>
</
div
>
Last time we used an image that was 600px by 300px, this time we’ll flip that around and go with a photo that is 300px by 600px.
CSS
/*VERTPAN*/
.vertpan img {
margin-top
:
0px
;
-webkit-transition: margin
1
s ease;
-moz-transition: margin
1
s ease;
-o-transition: margin
1
s ease;
-ms-transition: margin
1
s ease;
transition: margin
1
s ease;
}
.vertpan img:hover {
margin-top
:
-200px
;
}
Same drill as last time, only we’re using margin-top instead of margin-left. This will cause the top of the image to be in view by default and the bottom of the image to come into view on hover.
Fun with Transforms
Our next section of effects is a little more crazy. We’ll start with a simple tilt but then jump into some really unique and interesting hovers.
Here’s a demo of the three effects in action:
Demo: Click here to launch.
Tilt
This one is super simple, all we’re going to do is rotate the image slightly when the user hovers over it. The result is a basic but fun illusion of a crooked hanging picture.
HTML
<
div
class
=
"tilt pic"
>
<
img
src
=
"http://lorempixel.com/300/300/transport/5"
alt
=
"car"
>
</
div
>
CSS
/*TILT*/
.tilt {
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
-ms-transition:
all
0.5
s ease;
transition:
all
0.5
s ease;
}
.tilt:hover {
-webkit-transform: rotate(
-10
deg);
-moz-transform: rotate(
-10
deg);
-o-transform: rotate(
-10
deg);
-ms-transform: rotate(
-10
deg);
transform: rotate(
-10
deg);
}
As you can see, all we had to do was rotate the image ten degrees. Easy and effective! Notice that this time around, we’re targeting the class itself, not the image.
Morph
This is where the crazy comes in. The image above doesn’t really do this one justice so be sure to check out the demo. What’s happening is that, when the user hovers, the image begins to spin. As it spins, it morphs from a square into a circle. The result is super fun to play with.
HTML
<
div
class
=
"morph pic"
>
<
img
src
=
"http://lorempixel.com/300/300/nature/5"
alt
=
"beach"
>
</
div
>
CSS
/*MORPH*/
.morph {
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
-ms-transition:
all
0.5
s ease;
transition:
all
0.5
s ease;
}
.morph:hover {
border-radius:
50%
;
-webkit-transform: rotate(
360
deg);
-moz-transform: rotate(
360
deg);
-o-transform: rotate(
360
deg);
-ms-transform: rotate(
360
deg);
transform: rotate(
360
deg);
}
What I’ve done here is set the morph class to spin 360 degrees on hover. As it’s spinning, the border-radius will gradually climb its way to 50%, resulting in a circle.
Focus
Here’s another weird one that uses border-radius to round off the image. This time though, we’ll not only increase the border’s radius but also its thickness. Combined with the border-box, this will create an effect that focuses in on on particular part of an image.
HTML
<
div
class
=
"focus pic"
>
<
img
src
=
"http://lorempixel.com/300/300/sports/1"
alt
=
"cricket"
>
</
div
>
CSS
/*FOCUS*/
.focus {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.focus:hover {
border
:
70px
solid
#000
;
border-radius:
50%
;
}
What I did here was take our 10px white border and turned it into a 70px black border while cranking the radius up to 50% like we did in the last example.
Webkit Filters
This last set of effects is purely experimental. Unlike the examples above, all of which use multiple prefixes to ensure maximum browser compatibility, these only use the -webkit prefix because there’s no other support at the moment. If you’re not using Safari or Chrome, these aren’t going to work for you.
Despite the unfortunate constraints, Webkit filters let you perform some pretty awesome effects! Here’s a demo of three of my favorites:
Demo: Click here to launch.
Blur
The first effect that we’re going for is a simple blur. Long has man sought to blur pixels with CSS alone and now it’s finally possible with one little line of code!
HTML
<
div
class
=
"blur pic"
>
<
img
src
=
"http://lorempixel.com/300/300/transport/2"
alt
=
"plane"
>
</
div
>
CSS
/*BLUR*/
.blur img {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.blur img:hover {
-webkit-filter: blur(
5px
);
}
AS you can see, we use the -webkit-filter property, then set the blur to 5px. That’s all there is to it.
B&W
This time we’re going to drop all of the saturation out of the image on hover. It used to take two images to pull off this effect but with Webkit filters, we can cut this down to one.
HTML
<
div
class
=
"bw pic"
>
<
img
src
=
"http://lorempixel.com/300/300/nature/2"
alt
=
"sea"
>
</
div
>
CSS
/*B&W*/
.bw {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.bw:hover {
-webkit-filter: grayscale(
100%
);
}
Here I set the grayscale value to 100%. If you only want to drop some of the saturation out, try bringing down this number.
Brighten
For our final trick, we’re going to darken a photo by default, then brighten it up to its normal state on hover. This creates a sort of reveal effect.
<
div
class
=
"brighten pic"
>
<
img
src
=
"http://lorempixel.com/300/300/technics/2"
alt
=
"sea"
>
</
div
>
/*DARKEN*/
.brighten img {
-webkit-filter: brightness(
-65%
);
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.brighten img:hover {
-webkit-filter: brightness(
0%
);
}
Here, 0% is regular brightness. Anything above that and you brighten the image, anything below and you darken it. We started at -65% and brought it up to 0% on hover.
Steal Them!
The examples above are all meant for you to steal and use as you will in your own work, so be sure to bookmark this page and come back to it the next time you’re looking for an interesting CSS hover effect.
- 10 Easy Image Hover Effects You Can Copy and Paste
- Android Copy and Paste
- UITextView copy and paste
- Excel And DataGridView Copy/Paste
- Copy and Paste to OneNote
- vim Paste and Copy Problem!!!!!
- android-Copy and Paste(text and input)
- android-Copy and Paste(text and input)
- How working of Copy and Paste
- Copy and Paste to OneNote (AutoHotKey script)
- Enable Clipboard Copy and Paste in vSphere
- Android Copy and Paste 复制粘贴
- Python 文件的Copy and Paste
- How to Copy and Paste in the Ubuntu Gnome Terminal
- How to fix VMware WorkStation copy and paste
- How to copy and paste quickly in the shell
- copy & paste between vim and system clipboard, vim paste in insert mode
- If you want to paste code into IPython, try the %paste and %cpaste magic functions.
- 热烈祝贺博客排名进入前10000
- ORACLE 11G RAC [INS-32026] The Software Location specified should not
- Wine完全使用完全指南(从初级到高级)
- Understanding Unix/Linux Programming 笔记:chapter 11:连接到近端或远端的进程:服务器与Socket(套接字)
- crontab不执行
- 10 Easy Image Hover Effects You Can Copy and Paste
- node-webkit解析excel文档
- maven部署web项目到tomcat7(兼容tomcat8)
- N!最末非零位数值
- 刚开始学servlet把自己刚写的一个小页面贴出来写的很粗糙
- Fedora安装与删除wine
- 在sys目录创建接口
- Gitblit 资源目录空白
- Web前端