We have another set of CSS3 Image hover effects which are easy to use. The collection of effects are build without using any script. You can apply them on any kind of website.
We will create them by using CSS and some of the CSS3 advance techniques which make them look good and unique in design.
In our previous tutorial, we did create Circle Image Hover Effects with CSS Transitions but here we will keep the image dimension rectangular which is perfect for flat design websites.
The effects design looks like any kind of premium effects which are normally paid but here you will find them free to download to use them in your personal as well as commercial projects.
Furthermore, you can easily add the overlay text, buttons, and icons over the image. These set of elements will show when user mouse over the image.
There are two different variations of each effect. The one comes and possible to implement with on-hover whereas the second style included without hovering.
Our collection includes 5 unique style effects with a simple possible structure. You can easily use any of them by just apply to specify class.
Create HTML Structure for Image
As I said above, we have five different images effects but here I will take a look at the markup of the first effect. All of the other effects of markup is quite similar. You can find in the download source file.
The markup is quite simple and easy to understand. We have a figure element which holds the <img> and a child element figcaption which has the heading.
However, you can also add more element inside the figcaption element such as paragraph, span, etc. Similarly, if you can also add a link but you need to place it out the figcaption element.
<figure class="hover-effect-1">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" alt="sample70" />
<figcaption>
<h3>Ingredia <span>Nutrisha</span></h3>
</figcaption>
<a href="#"></a>
</figure>The above markup works with on-hover but if you want to show the text without hovering then simply apply the “hover” class to the figure element.
<figure class="hover-effect-1 hover">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" alt="sample106" />
<figcaption>
<h3>Dianne <span>Ameter</span></h3>
</figcaption>
<a href="#"></a>
</figure>
Hover Effects with CSS3
Let’s style the HTML element with CSS3 to make them work. We’ll start with the main container (.hover-effect-1) to apply some general styling such as background color, font-size, width, and height.
The thing to be noticed is max and min-width which help us to make work the image hover effects on mobile devices without using media queries.
Another thing to be consider is position: relative; which will help us to set the element in a normal position. This will also help us to use the Absolute position on the child element (figcaption ).
.hover-effect-1 {
background-color: #000;
color: #fff;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 24px;
margin: 10px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
After that, we will use the box-sizing element which will allow us to add the padding in the element’s width and height.
.hover-effect-1 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
Our next step to design the effects and for this, we will use the :before and :after properties.
.hover-effect-1:before,
.hover-effect-1:after {
background-color: rgba(0, 0, 0, 0.5);
border-top: 50px solid rgba(0, 0, 0, 0.5);
border-bottom: 50px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
opacity: 0;
}
Let’s apply the CSS3 transform property on (class) both :before and :after for image hover effects.
.hover-effect-1:before {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.hover-effect-1:after {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.hover-effect-1 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
By using the absolute position to child element figcaption, we can easily add it over the image to take full width and height according to image size.
.hover-effect-1 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;
z-index: 2;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
Let’s style the HTML element to make them look good.
.hover-effect-1 h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.hover-effect-1 h3 span {
display: block;
font-weight: 700;
}
.hover-effect-1 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
Finally, If you want to make the effects work without hovering then here is the CSS you need to add.
.hover-effect-1:hover > img,
.hover-effect-1.hover > img {
opacity: 0.7;
}
.hover-effect-1:hover:before,
.hover-effect-1.hover:before,
.hover-effect-1:hover:after,
.hover-effect-1.hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.hover-effect-1:hover figcaption,
.hover-effect-1.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
That’s it. Let’s customize the hover effects by adding additional CSS3 and make them look as you want. You can change color, font-size to match with your website template.