Today, We want to share with you image hover effects.In this post we will show you html hover image, hear for css hover we will give you demo and example for implement.In this post, we will learn about Image Overlay Hover Effects With CSS3 Transitions with an example.
css hover | hover css | css image | css hover effects | image overlay
HTML Code
CSS Image Hover Effects - Image Overlay Hover Effects With CSS3 Transitions
No Effect
GravityGravityGravity1. Zoom In #1
GravityGravityGravity2. Zoom In #2
GravityGravityGravity3. Zoom Out #1
GravityGravityGravity4. Zoom Out #2
GravityGravityGravity5. Slide
GravityGravityGravity6. Rotate(+Zoom Out)
GravityGravityGravity7. Blur
GravityGravityGravity8. Gray Scale
GravityGravityGravity9. Sepia
GravityGravityGravity10. Blur + Gray Scale
GravityGravityGravity11. Opacity #1
GravityGravityGravity12. Opacity #2
GravityGravityGravity13. Flashing
GravityGravityGravity14. Shine
GravityGravityGravity15. Circle
GravityGravityGravity
CSS Code
body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 300px; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Zoom In #1 */ .gravity01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } /* Zoom In #2 */ .gravity02 figure img { width: 300px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity02 figure:hover img { width: 350px; } /* Zoom Out #1 */ .gravity03 figure img { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity03 figure:hover img { -webkit-transform: scale(1); transform: scale(1); } /* Zoom Out #2 */ .gravity04 figure img { width: 400px; height: auto; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity04 figure:hover img { width: 300px; } /* Slide */ .gravity05 figure img { margin-left: 30px; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity05 figure:hover img { margin-left: 0; } /* Rotate */ .gravity06 figure img { -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity06 figure:hover img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); } /* Blur */ .gravity07 figure img { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity07 figure:hover img { -webkit-filter: blur(0); filter: blur(0); } /* Gray Scale */ .gravity08 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity08 figure:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } /* Sepia */ .gravity09 figure img { -webkit-filter: sepia(100%); filter: sepia(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity09 figure:hover img { -webkit-filter: sepia(0); filter: sepia(0); } /* Blur + Gray Scale */ .gravity10 figure img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity10 figure:hover img { -webkit-filter: grayscale(100%) blur(3px); filter: grayscale(100%) blur(3px); } /* Opacity #1 */ .gravity11 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity11 figure:hover img { opacity: .5; } /* Opacity #2 */ .gravity12 figure { background: #1abc9c; } .gravity12 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .gravity12 figure:hover img { opacity: .5; } /* Flashing */ .gravity13 figure:hover img { opacity: 1; -webkit-animation: flash 1.5s; animation: flash 1.5s; } @-webkit-keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes flash { 0% { opacity: .4; } 100% { opacity: 1; } } /* Shine */ .gravity14 figure { position: relative; } .gravity14 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .gravity14 figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /* Circle */ .gravity15 figure { position: relative; } .gravity15 figure::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .gravity15 figure:hover::before { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } }
I hope you get an idea about css image hover effects.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.