This is an excellent bundle of 20 free CSS snippets for image hovers that you can use for your websites. These great freebies come with beautiful image hover effects and various animations. They will definitely improve your website’s usability and attract the viewer’s attention.
You can choose between several image hover effects that add elements such as a title, subtitle, icons, caption, offset border, and more. Take a look at all of them, select your favorites, download and use them in your projects.
These will look stunning on photography websites, online portfolios, image galleries, or just about any website that uses lots of images.
Any designer can use these neat assets which will definitely come in handy at some point. Enjoy!
Image with title and subtitle on hover
Here is a great CSS snippet that creates this beautiful image hover effect. It has a subtle effect by adding title and subtitle and a semi-transparent gray top layer.
@import url(http://ift.tt/2iNc9tx);
.snip1577 {
font-family: 'Montserrat', Arial, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #fff;
text-align: left;
font-size: 16px;
background: #000;
}
.snip1577 *,
.snip1577:before,
.snip1577:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1577 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1577:before,
.snip1577:after {
position: absolute;
top: 20px;
right: 20px;
content: '';
background-color: #fff;
z-index: 1;
opacity: 0;
}
.snip1577:before {
width: 0;
height: 1px;
}
.snip1577:after {
height: 0;
width: 1px;
}
.snip1577 figcaption {
position: absolute;
left: 0;
bottom: 0;
padding: 15px 20px;
}
.snip1577 h3,
.snip1577 h4 {
margin: 0;
font-size: 1.1em;
font-weight: normal;
opacity: 0;
}
.snip1577 h4 {
font-size: .8em;
text-transform: uppercase;
}
.snip1577 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1577:hover img,
.snip1577.hover img {
zoom: 1;
filter: alpha(opacity=20);
opacity: 0.2;
opacity: 0.2;
}
.snip1577:hover:before,
.snip1577.hover:before,
.snip1577:hover:after,
.snip1577.hover:after {
opacity: 1;
transition-delay: 0.25s;
transition-delay: 0.25s;
}
.snip1577:hover:before,
.snip1577.hover:before {
width: 40px;
}
.snip1577:hover:after,
.snip1577.hover:after {
height: 40px;
}
.snip1577:hover h3,
.snip1577.hover h3,
.snip1577:hover h4,
.snip1577.hover h4 {
opacity: 1;
}
.snip1577:hover h3,
.snip1577.hover h3 {
transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1577:hover h4,
.snip1577.hover h4 {
transition-delay: 0.35s;
transition-delay: 0.35s;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with button on hover
@import url(http://ift.tt/1KxZspT;);
.snip1573 {
background-color: #000;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 10px 7px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1573 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1573:before,
.snip1573:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: all 0.35s ease;
transition: all 0.35s ease;
background-color: #000000;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
content: '';
opacity: 0.9;
z-index: 1;
}
.snip1573:before {
transform: skew(45deg) translateX(-155%);
transform: skew(45deg) translateX(-155%);
}
.snip1573:after {
transform: skew(45deg) translateX(155%);
transform: skew(45deg) translateX(155%);
}
.snip1573 img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}
.snip1573 figcaption {
top: 50%;
left: 50%;
position: absolute;
z-index: 2;
transform: translate(-50%, -50%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
.snip1573 h3 {
background-color: #000000;
border: 2px solid #fff;
color: #fff;
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 5px 10px;
text-transform: uppercase;
}
.snip1573 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
.snip1573:hover > img,
.snip1573.hover > img {
opacity: 0.5;
}
.snip1573:hover:before,
.snip1573.hover:before {
transform: skew(45deg) translateX(-55%);
transform: skew(45deg) translateX(-55%);
}
.snip1573:hover:after,
.snip1573.hover:after {
transform: skew(45deg) translateX(55%);
transform: skew(45deg) translateX(55%);
}
.snip1573:hover figcaption,
.snip1573.hover figcaption {
transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
This is a nice CSS snippet for image hover that adds a button when you move your mouse over it. It also attaches a 45° top black layer that highlights the button.
Image and title with title border effect on hover
Here is a beautiful CSS snippet for image hover that slides a gray top layer over your image. It also adds a border on the title. Take a look and use it in your websites!
@import url(http://ift.tt/144zJXh;);
.snip1571 {
background-color: #000;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 10px 7px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1571 *,
.snip1571 *:before {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1571 img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}
.snip1571 figcaption {
bottom: 30px;
left: 0;
position: absolute;
z-index: 0;
}
.snip1571 figcaption:before {
background-color: #ffffff;
bottom: -5px;
content: '';
left: 0;
position: absolute;
right: 100%;
top: -5px;
z-index: -1;
}
.snip1571 h3 {
background-color: #c73232;
color: #ffffff;
font-size: 0.9em;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 5px 10px;
text-transform: uppercase;
z-index: 1;
}
.snip1571 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1571:hover > img,
.snip1571.hover > img {
opacity: 0.1;
}
.snip1571:hover figcaption:before,
.snip1571.hover figcaption:before {
right: -5px;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with slide down icon on hover
This is a neat hover effect that lets you add an overlay shape and icon over your image when you hover over it. It has a nice animation that comes along with this effect.
@import url(http://ift.tt/1G498Ii);
.snip1569 {
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
font-size: 16px;
transform: translateZ(0);
transform: translateZ(0);
}
.snip1569 *,
.snip1569 *:before,
.snip1569 *:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1569 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1569 figcaption {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #009ab6;
transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
.snip1569 i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 4em;
z-index: 1;
}
.snip1569 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1569:hover figcaption,
.snip1569.hover figcaption {
opacity: 1;
transform: translateX(0);
transform: translateX(0);
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with title on hover
This is a wonderful image hover effect that slides a white semi-transparent layer over your image. It also adds a title to describe the image better.
@import url(http://ift.tt/2iVazTw;);
.snip1576 {
background-color: #fff;
color: #444;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 24px;
margin: 8px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1576 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1576:after {
background-color: #359ad8;
height: 150%;
bottom: -145%;
content: '';
left: 0;
right: 0;
position: absolute;
transition: all 0.5s linear;
transition: all 0.5s linear;
}
.snip1576 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1576 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
transition-delay: 0s;
transition-delay: 0s;
}
.snip1576 h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.snip1576 h3 span {
display: block;
font-weight: 700;
}
.snip1576 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1576:hover > img,
.snip1576.hover > img {
opacity: 0.1;
}
.snip1576:hover:after,
.snip1576.hover:after {
bottom: 95%;
}
.snip1576:hover figcaption,
.snip1576.hover figcaption {
opacity: 1;
transition-delay: 0.4s;
transition-delay: 0.4s;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with title and icon on hover
This is a great CSS snippet for image hover that lets you add a title and icon over any image from your website. This effect is visible only when you hover your mouse over the image.
@import url(http://ift.tt/1SpKw1F);
.snip1572 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #000000;
text-align: left;
font-size: 16px;
background: #ffffff;
}
.snip1572 *,
.snip1572:before,
.snip1572:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1572 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1572:before,
.snip1572:after {
content: '';
background-color: #000;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
opacity: 0;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.snip1572:before {
width: 300px;
height: 2px;
}
.snip1572:after {
height: 300px;
width: 2px;
}
.snip1572 figcaption {
position: absolute;
left: 0;
bottom: 0;
}
.snip1572 h3 {
font-weight: 400;
padding: 8px 15px;
margin: 0;
opacity: 0;
transform: translateY(100%);
transform: translateY(100%);
}
.snip1572 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1572:hover img,
.snip1572.hover img {
zoom: 1;
filter: alpha(opacity=25);
opacity: 0.25;
opacity: 0.25;
}
.snip1572:hover:before,
.snip1572.hover:before,
.snip1572:hover:after,
.snip1572.hover:after {
opacity: 1;
}
.snip1572:hover:before,
.snip1572.hover:before {
width: 50px;
}
.snip1572:hover:after,
.snip1572.hover:after {
height: 50px;
}
.snip1572:hover h3,
.snip1572.hover h3 {
transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with icon and title on hover
Here is a unique hover effect that you can easily implement into your website. This freebie adds a nice angled effect, an icon, and a title over your image.
@import url(http://ift.tt/2iV8oPT);
@import url(http://ift.tt/1G498Ii);
.snip1570 {
font-family: 'Poppins', Arial, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #000000;
font-size: 16px;
line-height: 1.2em;
text-align: center;
font-weight: 300;
}
.snip1570 *,
.snip1570 *:before,
.snip1570 *:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.65s ease;
transition: all 0.65s ease;
}
.snip1570:after {
transition: all 0.65s ease;
transition: all 0.65s ease;
position: absolute;
height: 0px;
width: 0px;
bottom: -478px;
right: -478px;
border-radius: 50%;
border: 500px solid transparent;
border-bottom-color: #000000;
border-right-color: #000000;
content: '';
opacity: 0.8;
}
.snip1570 img {
max-width: 100%;
vertical-align: top;
}
.snip1570 i {
position: absolute;
bottom: -10px;
right: -10px;
border-radius: 50%;
color: #000000;
display: block;
z-index: 10;
}
.snip1570 i:before,
.snip1570 i:after {
border-radius: 50%;
}
.snip1570 i:before {
color: #ddd;
background-color: #fff;
font-size: 37.64705882px;
line-height: 64px;
text-align: center;
width: 64px;
}
.snip1570 i:after {
position: absolute;
top: -14px;
bottom: -14px;
left: -14px;
right: -14px;
border: 15px solid #ddd;
border-bottom-color: #2980b9;
border-right-color: #2980b9;
content: '';
z-index: -2;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5);
}
.snip1570 i:hover {
background-color: #D2B17F;
cursor: pointer;
}
.snip1570 h3 {
top: 5px;
color: #fff;
letter-spacing: 2px;
margin: 0;
opacity: 0;
padding: 10px 15px;
position: absolute;
left: 0;
text-transform: uppercase;
z-index: 3;
}
.snip1570 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
}
.snip1570:hover:after,
.snip1570.hover:after {
transform: rotate(180deg);
transform: rotate(180deg);
}
.snip1570:hover img,
.snip1570.hover img {
transform: scale(1.1);
transform: scale(1.1);
}
.snip1570:hover i:before,
.snip1570.hover i:before {
color: #2980b9;
}
.snip1570:hover i:after,
.snip1570.hover i:after {
transform: rotate(180deg);
transform: rotate(180deg);
}
.snip1570:hover h3,
.snip1570.hover h3 {
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image and icon with title and caption on hover
This is a nice CSS snippet freebie that you can use for your websites. This adds an icon, a title, and a caption when you hover over the image. Take a look and use it in your projects.
@import url(http://ift.tt/1kiT9jS);
@import url(http://ift.tt/1G498Ii);
.snip1567 {
background-color: #000000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #ffffff;
display: inline-block;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 8px;
max-width: 310px;
min-width: 250px;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
}
.snip1567 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1567 img {
max-width: 100%;
opacity: 0.75;
position: relative;
vertical-align: top;
}
.snip1567 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1567 h3 {
transform: translateY(-100%);
transform: translateY(-100%);
background-color: #000000;
top: 0;
font-weight: 800;
letter-spacing: -0.4px;
margin: 0;
padding: 10px 20px;
position: absolute;
width: 100%;
}
.snip1567 p {
position: absolute;
width: 100%;
bottom: 0;
padding: 0px 20px;
opacity: 0;
text-align: right;
transition-delay: 0.15s;
transition-delay: 0.15s;
}
.snip1567 i {
position: absolute;
top: 50%;
left: 50%;
font-size: 54px;
transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.snip1567 .hover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
background-color: rgba(236, 188, 46, 0.75);
display: flex;
font-size: 65px;
justify-content: center;
opacity: 0;
}
.snip1567 a {
left: 0;
bottom: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.snip1567:hover .hover,
.snip1567.hover .hover {
opacity: 1;
}
.snip1567:hover p,
.snip1567.hover p {
opacity: 1;
}
.snip1567:hover h3,
.snip1567.hover h3 {
transform: translateY(0%);
transform: translateY(0%);
}
.snip1567:hover i,
.snip1567.hover i {
transform: translate(-50%, -50%) scale(0.1);
transform: translate(-50%, -50%) scale(0.1);
opacity: 0;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Rounded images with icon on hover
This is a unique hover effect that you can easily implement into your website by downloading the free CSS snippet. This looks beautiful on rounded images and it adds icon and changes the border on hover.
@import url(http://ift.tt/1G498Ii);
.snip1566 {
position: relative;
display: inline-block;
margin: 20px;
max-width: 190px;
width: 100%;
color: #bbb;
font-size: 16px;
box-shadow: none !important;
transform: translateZ(0);
transform: translateZ(0);
}
.snip1566 *,
.snip1566:before,
.snip1566:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.3s linear;
transition: all 0.3s linear;
}
.snip1566:before,
.snip1566:after {
box-sizing: border-box;
box-sizing: border-box;
border-radius: 50%;
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
border: 2px solid #bbb;
border-color: transparent #bbb;
}
.snip1566 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
border-radius: 50%;
padding: 10px;
}
.snip1566 figcaption {
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
opacity: 0;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 50%;
}
.snip1566 i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 4em;
z-index: 1;
}
.snip1566 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1566:hover figcaption,
.snip1566.hover figcaption {
opacity: 1;
transform: translateX(0);
transform: translateX(0);
}
.snip1566:hover:before,
.snip1566.hover:before,
.snip1566:hover:after,
.snip1566.hover:after {
border-width: 10px;
}
.snip1566:hover:before,
.snip1566.hover:before {
transform: rotate(45deg);
transform: rotate(45deg);
}
.snip1566:hover:after,
.snip1566.hover:after {
transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with offset border and title
Here is a great CSS snippet that lets you add a subtle hover effect on any image from your website. When you move your mouse over the image it will color the offset border.
@import url(http://ift.tt/1KuCvFo);
@import url(http://ift.tt/1G498Ii);
.snip1556 {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #000000;
display: inline-block;
font-family: 'Oswald', Arial, sans-serif;
font-size: 16px;
margin: 8px;
max-width: 310px;
min-width: 250px;
position: relative;
text-align: left;
width: 100%;
box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
box-shadow: none !important;
padding: 30px 40px 0 0;
}
.snip1556 *,
.snip1556 *:before {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.snip1556 img {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 100%;
position: relative;
vertical-align: top;
}
.snip1556 figcaption {
background-color: #333333;
bottom: 30px;
left: 40px;
position: absolute;
right: 0;
top: 0;
}
.snip1556 h3 {
font-size: 16px;
position: absolute;
transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
color: #fff;
left: 100%;
letter-spacing: 1px;
margin: 12px 0;
opacity: 0.8;
padding: 6px 40px 0 0;
right: 0;
text-transform: uppercase;
top: 0;
white-space: nowrap;
}
.snip1556 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.snip1556:hover figcaption,
.snip1556.hover figcaption {
background-color: #c0392b;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with title and caption on hover
Here is another beautiful hover effect that you can add to your website simply by downloading this free CSS snippet. It will slide a beautiful shape layer over your image and it will also add a title and caption.
@import url(http://ift.tt/1LImUFf);
@import url(http://ift.tt/2iN69Bf);
.snip1563 {
background-color: #fff;
color: #ffffff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
margin: 10px 5px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: right;
width: 100%;
}
.snip1563 *,
.snip1563 *:before,
.snip1563 *:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1563 img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}
.snip1563:before,
.snip1563:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color: #b81212;
opacity: 0.5;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1563:before {
transform: skew(30deg) translateX(80%);
transform: skew(30deg) translateX(80%);
}
.snip1563:after {
transform: skew(-30deg) translateX(70%);
transform: skew(-30deg) translateX(70%);
}
.snip1563 figcaption {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
bottom: 0;
padding: 20px 20px 20px 40%;
}
.snip1563 figcaption:before,
.snip1563 figcaption:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #b81212;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
content: '';
opacity: 0.5;
z-index: -1;
}
.snip1563 figcaption:before {
transform: skew(30deg) translateX(100%);
transform: skew(30deg) translateX(100%);
}
.snip1563 figcaption:after {
transform: skew(-30deg) translateX(90%);
transform: skew(-30deg) translateX(90%);
}
.snip1563 h3,
.snip1563 p {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}
.snip1563 h3 {
font-family: 'Teko', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}
.snip1563 p {
font-size: 0.9em;
}
.snip1563 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1563:hover h3,
.snip1563.hover h3,
.snip1563:hover p,
.snip1563.hover p {
transform: translateY(0);
transform: translateY(0);
opacity: 0.9;
}
.snip1563:hover:before,
.snip1563.hover:before {
transform: skew(30deg) translateX(30%);
transform: skew(30deg) translateX(30%);
transition-delay: 0.05s;
transition-delay: 0.05s;
}
.snip1563:hover:after,
.snip1563.hover:after {
transform: skew(-30deg) translateX(20%);
transform: skew(-30deg) translateX(20%);
}
.snip1563:hover figcaption:before,
.snip1563.hover figcaption:before {
transform: skew(30deg) translateX(50%);
transform: skew(30deg) translateX(50%);
transition-delay: 0.15s;
transition-delay: 0.15s;
}
.snip1563:hover figcaption:after,
.snip1563.hover figcaption:after {
transform: skew(-30deg) translateX(40%);
transform: skew(-30deg) translateX(40%);
transition-delay: 0.1s;
transition-delay: 0.1s;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with title and quote on hover
This is a simple hover effect which will add an overlay image with a sliding effect. It also adds a title and a quote that are both visible only when you hover over the image.
@import url(http://ift.tt/1LImUFf);
.snip1552 {
font-family: 'Source Sans Pro', sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
margin: 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #000000;
text-align: left;
font-size: 16px;
background-color: #fff;
}
.snip1552 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1552 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1552 figcaption {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
z-index: 1;
bottom: 0;
}
.snip1552 h3,
.snip1552 p {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}
.snip1552 h3 {
transform: translateY(-100%);
transform: translateY(-100%);
text-transform: uppercase;
font-weight: 400;
margin-bottom: 5px;
}
.snip1552 p {
font-weight: normal;
font-style: italic;
color: #888;
font-size: 0.9em;
padding-left: 15px;
transform: translateX(-25px);
transform: translateX(-25px);
}
.snip1552 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1552:hover > img,
.snip1552.hover > img {
opacity: 0.1;
}
.snip1552:hover h3,
.snip1552.hover h3,
.snip1552:hover p,
.snip1552.hover p {
transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with multiple icons on hover
This is a great CSS snippet that adds a subtle top layer over the image that you move your mouse over. It also adds multiple icons that give you lots of possibilities.
@import url(http://ift.tt/1G498Ii);
.snip1550 {
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px 8px;
min-width: 230px;
max-width: 315px;
width: 100%;
font-size: 16px;
line-height: 1.2em;
}
.snip1550 *,
.snip1550 *:before,
.snip1550 *:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1550:before {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
content: '';
background-color: #ffffff;
opacity: 0;
transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1550 img {
max-width: 100%;
vertical-align: top;
}
.snip1550 .icons {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.snip1550 a {
margin: 2px;
opacity: 0;
transform: scale(0.5);
transform: scale(0.5);
}
.snip1550 a i {
display: block;
font-size: 23.52941176px;
line-height: 40px;
width: 40px;
background-color: #ffffff;
text-align: center;
color: #000000;
}
.snip1550 a i:hover {
background-color: #000000;
color: #ffffff;
cursor: pointer;
}
.snip1550:hover:before,
.snip1550.hover:before {
opacity: 0.5;
}
.snip1550:hover a,
.snip1550.hover a {
opacity: 1;
transform: scale(1);
transform: scale(1);
}
.snip1550:hover a:nth-child(2),
.snip1550.hover a:nth-child(2) {
transition-delay: 0.15s;
transition-delay: 0.15s;
}
.snip1550:hover a:nth-child(3),
.snip1550.hover a:nth-child(3) {
transition-delay: 0.3s;
transition-delay: 0.3s;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with single icon on hover
Here is a CSS snippet that you can use for just about any image from your website. This freebie lets you add gray shapes and an icon over the image that you hover over.
@import url(http://ift.tt/1G498Ii);
.snip1545 {
position: relative;
display: inline-block;
overflow: hidden;
margin: 10px 7px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
font-size: 16px;
background-color: #000000;
transform: translateZ(0);
transform: translateZ(0);
}
.snip1545 *,
.snip1545 *:before,
.snip1545 *:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.4s ease;
transition: all 0.4s ease;
}
.snip1545 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
}
.snip1545 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.snip1545 figcaption:before,
.snip1545 figcaption:after,
.snip1545 figcaption div:before,
.snip1545 figcaption div:after {
opacity: 0;
}
.snip1545 figcaption:before,
.snip1545 figcaption:after {
height: 50%;
width: 50%;
position: absolute;
content: '';
background-color: #080808;
transform: rotate(-90deg);
transform: rotate(-90deg);
}
.snip1545 figcaption:before {
top: 0;
left: 0;
transform-origin: 100% 100%;
transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.snip1545 figcaption:after {
bottom: 0;
right: 0;
transform-origin: 0 0;
transform-origin: 0 0;
transform-origin: 0 0;
}
.snip1545 figcaption div:before,
.snip1545 figcaption div:after {
width: 50%;
height: 50%;
position: absolute;
content: '';
background-color: #000000;
transform: rotate(90deg);
transform: rotate(90deg);
}
.snip1545 figcaption div:before {
top: 0;
right: 0;
transform-origin: 0 100%;
transform-origin: 0 100%;
transform-origin: 0 100%;
}
.snip1545 figcaption div:after {
bottom: 0;
left: 0;
transform-origin: 100% 0;
transform-origin: 100% 0;
transform-origin: 100% 0;
}
.snip1545 i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 4em;
z-index: 1;
opacity: 0;
}
.snip1545 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1545:hover img,
.snip1545.hover img {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
opacity: 0.5;
}
.snip1545:hover i,
.snip1545.hover i {
opacity: 0.7;
transition-delay: 0.2s;
transition-delay: 0.2s;
}
.snip1545:hover figcaption:before,
.snip1545.hover figcaption:before,
.snip1545:hover figcaption:after,
.snip1545.hover figcaption:after,
.snip1545:hover figcaption div:before,
.snip1545.hover figcaption div:before,
.snip1545:hover figcaption div:after,
.snip1545.hover figcaption div:after {
transform: rotate(0);
transform: rotate(0);
opacity: 0.8;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with roll in disk on hover
Here is another wonderful hover effect that you can download for free and use in your websites. It is a simple CSS snippet that can make your images more lively.
@import url(http://ift.tt/1kiT9jS;);
.snip1541 {
background-color: #fff;
color: #fff;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 13px 7px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1541 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1541 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1541 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1em;
opacity: 0;
transform: translateX(75%) rotate(180deg);
transform: translateX(75%) rotate(180deg);
}
.snip1541 figcaption:before {
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #000000;
border-radius: 50%;
content: '';
height: 100px;
left: 50%;
position: absolute;
top: 50%;
width: 100px;
z-index: -1;
}
.snip1541 h3 {
font-size: 0.9em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.snip1541 h3 span {
display: block;
font-weight: 800;
}
.snip1541 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1541:hover > img,
.snip1541.hover > img {
opacity: 0.1;
}
.snip1541:hover figcaption,
.snip1541.hover figcaption {
transform: translate(0px) rotate(0deg);
transform: translate(0px) rotate(0deg);
opacity: 1;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
Image with title and subtitle
This is a great freebie that includes the CSS snippet of a neat hover effect. This adds a title and a subtitle over your image as well as a red background.
@import url(http://ift.tt/1k4Fhr6);
@import url(http://ift.tt/1UEQQ9h);
.snip1507 {
font-family: 'Muli', sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
font-size: 16px;
background-color: #000000;
}
.snip1507 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1507 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.75;
}
.snip1507 figcaption {
z-index: 1;
align-items: center;
position: absolute;
width: 100%;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(195, 86, 97, 0.85);
background-image: linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
padding: 20px;
}
.snip1507 figcaption:before {
content: '';
width: 20px;
height: 20px;
background-color: #fff;
top: 0;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
position: absolute;
}
.snip1507 h3,
.snip1507 h5 {
margin: 0;
letter-spacing: 1px;
}
.snip1507 h3 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 400;
}
.snip1507 h5 {
font-weight: normal;
}
.snip1507 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1507:hover > img,
.snip1507.hover > img {
opacity: 1;
filter: grayscale(0%);
filter: grayscale(0%);
}
/* Demo purposes only */
body {
background-color: #212121;
}
Image with title and caption on hover
Here is an excellent hover effect that you can use in your websites for any image that you want. This freebie comes with a full CSS snippet of a nice hover effect.
@import url(http://ift.tt/292PKzC);
@import url(http://ift.tt/2iVaAa2);
.snip1484 {
font-family: 'Josefin Sans', sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 16px;
background-color: #000000;
}
.snip1484 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1484 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1484 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
padding: 30px;
background-color: rgba(0, 0, 0, 0.75);
border: 4px solid rgba(255, 255, 255, 0.05);
transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 100% 0%;
transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.snip1484 h2,
.snip1484 p {
line-height: 1.5em;
margin: 0;
}
.snip1484 h2 {
font-family: 'Cardo', serif;
display: inline-block;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.snip1484 p {
padding: 8px 0 15px;
}
.snip1484 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1484:hover > img,
.snip1484.hover > img {
opacity: 0.2;
}
.snip1484:hover figcaption,
.snip1484.hover figcaption {
transform-origin: 0 100%;
transform-origin: 0 100%;
transform-origin: 0 100%;
transform: rotate(0);
transform: rotate(0);
}
/* Demo purposes only */
body {
background-color: #212121;
}
Image with switching title and caption on hover
Take a look at this beautiful hover effect and use it in your websites for any of your images. This is a useful freebie that includes the CSS snippet.
@import url(http://ift.tt/1SsY67d);
@import url(http://ift.tt/1q22RHV);
.snip1523 {
font-family: 'Lato', sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
font-size: 16px;
background-color: #1A1A1A;
}
.snip1523 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1523 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1523 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
padding: 30px;
background-color: #202123;
transform: translateX(100%);
transform: translateX(100%);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.snip1523 h2,
.snip1523 h3,
.snip1523 p {
margin: 0;
}
.snip1523 h2,
.snip1523 h3 {
font-family: 'Slabo 27px', serif;
line-height: 1.2em;
}
.snip1523 h2 {
font-size: 1.9em;
color: #35ADF9;
}
.snip1523 h3 {
color: #EBEBEB;
font-size: 1.3em;
font-weight: normal;
letter-spacing: 1px;
}
.snip1523 p {
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 0.9em;
margin-top: 12px;
padding: 12px 0 15px;
line-height: 1.5em;
}
.snip1523 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1523:hover > img,
.snip1523.hover > img {
transform: translateX(100%);
transform: translateX(100%);
}
.snip1523:hover figcaption,
.snip1523.hover figcaption {
transform: translateX(0%);
transform: translateX(0%);
}
/* Demo purposes only */
body {
background-color: #212121;
}
Image with title, position, and icon on hover
This is another great hover effect that is available for free download. You can easily add this CSS snippet into your website and make this hover effect visible on your images.
@import url(http://ift.tt/1MahJOt);
@import url(http://ift.tt/1G498Ii);
.snip1512 {
font-family: 'Lato', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 315px;
max-height: 230px;
width: 100%;
color: #000000;
text-align: left;
font-size: 16px;
background-color: #1a1a1a;
line-height: 1.2em;
}
.snip1512 *,
.snip1512 *:before,
.snip1512 *:after {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.25s linear;
transition: all 0.25s linear;
}
.snip1512 img {
max-width: 100%;
vertical-align: top;
}
.snip1512 figcaption {
position: absolute;
bottom: 0%;
width: 100%;
transform: translateY(100%);
transform: translateY(100%);
padding: 10px 20px;
background-color: #ffffff;
transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1512 h3,
.snip1512 p {
transform: translateY(-10px);
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: 0;
transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1512 h3 {
text-transform: uppercase;
font-weight: 700;
}
.snip1512 p {
font-weight: 400;
font-size: 0.9em;
}
.snip1512 i {
position: absolute;
color: #fff;
font-size: 34.11764706px;
line-height: 58px;
width: 58px;
bottom: 0;
right: 0;
background-color: #e67e22;
text-align: center;
transform: translateX(58px);
transform: translateX(58px);
}
.snip1512 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.snip1512:hover img,
.snip1512.hover img {
zoom: 1;
filter: alpha(opacity=30);
opacity: 0.3;
opacity: 0.3;
transform: translateY(-40px);
transform: translateY(-40px);
}
.snip1512:hover figcaption,
.snip1512.hover figcaption,
.snip1512:hover h3,
.snip1512.hover h3,
.snip1512:hover p,
.snip1512.hover p {
transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.snip1512:hover figcaption,
.snip1512.hover figcaption {
transition-delay: 0s;
transition-delay: 0s;
}
.snip1512:hover h3,
.snip1512.hover h3 {
transition-delay: 0.3s;
transition-delay: 0.3s;
}
.snip1512:hover p,
.snip1512.hover p {
transition-delay: 0.45s;
transition-delay: 0.45s;
opacity: 0.5;
}
.snip1512:hover i,
.snip1512.hover i {
transform: translateX(0);
transform: translateX(0);
transition-delay: 0.3s;
transition-delay: 0.3s;
}
/* Demo purposes only */
body {
background-color: #212121;
}
Image with slide in title on hover
Here is a beautiful hover effect that adds a slide in the title when you move your mouse over the image. This freebie includes a ready-to-use CSS snippet.
@import url(http://ift.tt/1MmWwm1);
@import url(http://ift.tt/1G498Ii);
.snip1441 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1px;
min-width: 230px;
max-width: 245px;
width: 100%;
color: #ffffff;
text-align: left;
font-size: 16px;
transform: translateZ(0);
transform: translateZ(0);
text-transform: uppercase;
box-shadow: none !important;
}
.snip1441:first-of-type {
margin-left: 10px;
}
.snip1441 * {
box-sizing: border-box;
box-sizing: border-box;
transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1441 .image {
padding: 15px 0;
}
.snip1441 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
position: relative;
opacity: 0.7;
}
.snip1441 figcaption {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: #0d0d0d;
transform: translateY(-100%);
transform: translateY(-100%);
}
.snip1441 h4 {
width: 100%;
margin: 0;
padding: 15px 20px;
line-height: 1.1em;
font-weight: 900;
}
.snip1441 i {
position: absolute;
right: 0;
top: 0;
padding: 8px 20px;
font-size: 26px;
}
.snip1441 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.snip1441:hover img,
.snip1441.hover img {
transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
.snip1441:hover figcaption,
.snip1441.hover figcaption {
transform: translateY(-2%);
transform: translateY(-2%);
}
/* Demo purposes only */
body {
background-color: #212121;
}
The post 20 Free CSS Snippets for Image Hovers appeared first on Web Design Blog | Magazine for Designers.
via http://ift.tt/2iUVYYi
No comments:
Post a Comment