Pure CSS3 Portfolio Hover Effects Tutorial

Today I’ll be showing you how to build pure css3 portfolio hover effects using this unique tutorial. This tutorial is inspired by Codrops css3 hover over effects and I’ve been meaning to do this tutorial for a while now. This is basically a simple portfolio with some unique css3 hover over effects.

There is nothing more attractive than a visually appealing portfolio and I’ve said it before your portfolio is one of the most important things you will ever have to design and build for your website. I will be showing you multiple CSS3 hover over effects for your portfolio design that you can then download and build on your own website.

I’m sure that these css3 effects will come in handy for elements other than portfolios. You are free to download the source files and use them on your own projects. However, I have not added the images in the source files because some are from my stock accounts.

Requirements

  • Intermediate knowledge of HTML & CSS

Note: Not all browsers support CSS3. These effects may not work in older browsers. I have applied all webkit standards in the download section. I have not shown them in this tutorial for simplicities sakes.

What We Will Be Creating

First off, let’s take look at the css3 portfolio effects we will be creating. I have created 4 css3 hover over effects in my examples. You are free to modify these effects. I would suggest having one consistent effect through out your design.

Live Demo | Download

Which hover over did you prefer the most? Please leave your feedback in the comments section.

Let’s start off with Portfolio # 1’s HTML markup. You may notice that the HTML markup is pretty consistent for each effect. I’ve basically used the same mark up for each portfolio, just made some minor modifications.

 

<div class="block1">
<div class="folio1"> 
     <img src="images/img1.jpg"/>
     <div class="face"> 
     <h2>Client</h2> 
     <p>Tagline goes here.</p> 
         <a href="#" class="icon">+</a> 
     </div> 

</div>  
	<p class="subtitle"><b>Brief snippet</b> or subtitle can go here.. </p>
</div>

block1 is the container so I could add in the snippet of text underneath it. It has nothing to do with the effect. folio1 is the main container that is used to style the main block. And face is basically the mask of the effect. The rest of the markup is pretty basic, using elements such as h2 tags, paragraph tags and applying classes to the a href element.

You will understand more of what each element does when I explain the CSS section of the tutorial. But as you can see it’s a pretty simple markup.

OK. Now for the CSS for Portfolio #1.

CSS Code

It looks like a lot, but it really isn’t and again it’s very simple code.

 
/* Pfolio #1 */ 

.folio1 {
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
    border: 10px solid #000;
    overflow: hidden;
    position: relative;
    text-align: center;

}


.folio1 .face {
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

/* styling effects when hover takes effect */ 

.folio1 img {
    display: block;
    position: relative;
}
.folio1 h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
}

.folio1 p {
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 20px;
    text-align: center;
}
.folio1 a.icon {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #fff;
    border-radius: 25px; 
    color: #000;
    text-transform: uppercase;
}

 */ if you want link hover over effects */ 
.folio1 a.icon:hover {

}

.folio1 img {
    transition: 0.5s; 
}

.folio1 .face{
    background-color: rgba(0,0,0,0.8);
    opacity:0;
    transition: 500ms; 
}
.folio1 h2{
    opacity:0;
    background: transparent;
    transform: rotate(180deg) skew(100deg, 100deg);
    transition: 500ms;
    font-size: 32px;
}
.folio1 p {
    font-size: 22px;
    opacity:0;
    transform: rotate(180deg) skew(100deg, 100deg);
    transition: 500ms;
}
.folio1 a.icon {
    opacity:0;
    transform: translateY(100px);
    transition: 500ms;
}


/* Hover overs */ 

.folio1:hover .face { 
    opacity:1;
    transition-delay: 0s;
    cursor: pointer; 
}                                                                          
.folio1:hover img {
    transition-delay: 0s;
}
.folio1:hover h2 {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}

.folio1:hover p {
    opacity:1;
    transform: scale(1);
    transition-delay: 0.2s;
}
.folio1:hover a.icon {
    opacity:1;
    transform: translateY(0px);
    transition-delay: 0.3s;
}

.folio1 determines the overall dimensions, borders, floats the elements to the left and this is where you would apply any general styling to the blocks.

.folio1 img, .folio1 h2, .folio1 p, and .folio1 a.icon: These are the landing style effects for when the hover over is run. Basically when your mouse is hovering over the elements these are the finishing CSS styles.

The 4 CSS classes underneath .folio1 .face. These properties are the same classes as the 4 I explained above, except these are where the main CSS3 effects are applied. For example .folio1 h2 uses the following properties:

transform: rotate(180deg) skew(100deg, 100deg);
transition: 500ms;

This basically tells it to rotate 180deg and skew 100deg x 100deg when coming into landing (you can actually see the skew and rotation when hovering over). It also applies a transition of 500ms which allows you to briefly see the hover over take effect. Without the transition you wouldn’t visually see the hover over for this element. You may have noticed too that the folio1 a.icon uses translateY(100px) this basically gives it a sliding effect, as oppose to a skewing and rotating effect. You can learn more about 2D transforms here.

One other important element is the opacity 0; that is being applied to the .folio1 h2 element and all classes under the .face class. This is hiding the effect until the user hovers over. When he/she does, it will apply the class .folio1:hover h2 which is the hover over for h2 and you will see that the opacity changes to opacity: 1; making the element visible. This is consistent through the img, p, h2, and a.icon classes. And for all 3 portfolio hover over effects.

Also the transition-delay found in the hover over sections. This delays each element by 1 point of a second and I also used scale(1) to scale the elements back to their original sizes.

I’m sure it sounds confusing, but it really isn’t. Have a play with it yourself and you will soon get the hang of it. If there is anything you do not understand please let me know in the comments section.

Portfolio Effect #2

The HTML mark up for this effect:

This is the exact same HTML mark up as the first portfolio example. If you want the full page markup, please download the source code.

<div class="folio2"> 
     <img src="images/img2.jpg"/>
     <div class="face">

     <h2>Hover Over 2</h2> 
     <p>Buenos Dias</p> 
         <a href="#" class="icon">More Info</a> 
		 
     </div> 
</div> 

Now here is the CSS code for this example.

 
.folio2 {
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;

}
.folio2 .face {
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.folio2 img {
    display: block;
    position: relative;
}
.folio2 h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.folio2 p {
    font-family: Tahoma, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center; 
}
.folio2 a.icon {
    display: inline-block;
    padding: 11px;
    background: #fff;
    color: #000;
    font-family: Tahoma, sans-serif; 
	 
}
.folio2 a.icon:hover {
    box-shadow: 0 0 5px #fff; 
}

.folio2 img {
    transition: 0.4s;
}

.folio2 .face{
    background-color: rgba(0,0,0,0.8);
    transform: translateX(200px);
    opacity:0;
    transition: 300ms; 
}


.folio2 h2{
    opacity:0;
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: 300ms;
    font-size: 32px;
}
.folio2 p {
    font-size: 22px;
    opacity:0;
    transition: 300ms;
}
.folio2 a.icon {
    opacity:0;
    transition: 300ms;
}


/* Hover overs */ 

.folio2:hover .face {  
    opacity:1;
    transition-delay: 0s;
    transform: translateX(0px);
}
                                                                     
.folio2:hover img {
    transition-delay: 0s;
}
.folio2:hover h2 {
    opacity: 1;
    transition-delay: 0.1s;
}
.folio2:hover p {
    opacity:1;
    transition-delay: 0.2s;
}
.folio2:hover a.icon {
    opacity:1;
    transition-delay: 0.3s;
}

This code is pretty much identical to the first portfolio example. The only difference being that we apply a translateX(200px) property to .folio .face to create the sliding window kind of effect, and then we apply translateX(0px) to the .folio:hover .face to return the element to it’s destination when hovered over. Also we have a slight faster transition for this example using a transition of 300ms as oppose to 500ms.

CSS3 Portfolio Example #3

Slightly different markup as we do not use headings in this example.

<div class="block1"> 
<div class="folio3"> 
     <img src="images/img3.jpg"/>
     <div class="face"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
         <a href="#" class="icon">Read More</a> 
     </div> 
</div>  
<p class="subtitle"><b>Brief snippet</b> or subtitle can go here.. </p>
</div>

And here is the css code. Again, only a slight difference and minus the heading classes.

CSS Code

.folio3 {
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;

}
.folio3 .face {
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

/* Returning Hovers */ 

.folio3 img {
    display: block;
    position: relative;
}

.folio3 p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 15px; 
    text-align: center;
}
.folio3 a.icon {
    display: inline-block;
    padding: 10px;
    color: #000;
    background-color: #fff; 
    text-decoration: none; 
}
.folio3 a.icon:hover {
    box-shadow: 0 0 5px #000;
}

.folio3 img {
    transition: 0.5s;
}

.folio3 .face{
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transition: 500ms; 
}

.folio3 p {
    font-size: 13px;
    opacity:0;
    transition: 300ms;
    transform: translate(-255px, 213px);
}
.folio3 a.icon {
    opacity: 0;
    transition: 300ms;
}


/* Hover overs */ 

.folio3:hover .face { 
    opacity:1;
    transition: 300ms;

}                                                                          
.folio3:hover img {
   transition: 300ms; 
}

.folio3:hover p {
    opacity:1;
    transform: translateY(0px);
}

.folio3:hover a.icon {
    opacity: 1;
    transition: 500ms;
	
}

The main effect here is the transform: translate(-255px, 213px); being applied to the folio3. p class underneath the .folio. face. This line of CSS basically positions the “face” diagonally from the main element. So that when the user hovers over the elements it’s pulled in to the middle using transform: translateY(0px); which is being applied to the .folio3:hover p class.

CSS3 Effect Portfolio # 4

Last, but not least we have the 4th portfolio css3 effect. This one again is a little different from the others as we have 2 icons.

Here is the HTML:


<div class="block1"> 
	<div class="folio4"> 
     <img src="images/img4.jpg"/>
     <div class="face"> 
	   <h2>Title</h2>
         <a href="#" class="icon"><img src="images/search-icon.png" /></a>
		 <a href="#" class="icon2"><img src="images/mail.png" /></a>
     </div> 
	 </div>
	 	<p class="subtitle"><b>Brief snippet</b> or subtitle can go here.. </p>
	 </div>

CSS Code – Portfolio #4

 
.folio4 {
    width: 300px;
    height: 300px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;

}
.folio4 .face {
    width: 300px;
    height: 300px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

/* Returning Hovers */ 

.folio4 img {
    display: block;
    position: relative;
}
.folio4 h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
}

.folio4 a.icon {
    display: inline-block;
    padding: 7px 14px;
    color: #fff;
}

.folio4 a.icon2 { 
    display: inline-block;
    padding: 7px 14px;
    color: #fff;
}


.folio4 img {
    transition: 0.5s;
}

.folio4 .face{
    background-color: rgba(0,0,0,0.8);
    opacity:0;
    transition: 500ms; 
}

.folio4 h2{
    opacity:0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    transition: 300ms;
    font-size: 32px;
}

.folio4 a.icon {
    opacity:0;
    transform: translateX(300px);
    transition: 300ms;
}

.folio4 a.icon2 {
    opacity:0;
    transform: translateX(-300px);
    transition: 300ms;
}


/* Hover overs */ 

.folio4:hover .face { 
    opacity:1; 
}                                                                          
.folio4:hover img {
   opacity: 1; 
}
.folio4:hover h2 {
    opacity: 1;
}

.folio4:hover a.icon {
    opacity:1;
    transform: translateY(75px); 
    transition: 500ms;
	
}

.folio4:hover a.icon2 { 
transition: 500ms; 
transform: translateY(75px);
opacity: 1; 

}

In this example we use the translate property to apply the sliding motion effect for each icon to its destination. For example: .folio4 a.icon has a transform: translateX(300px); and .folio4 a.icon2 has a transform :translateX(-300px); applied to it. These properties are pushing the elements off the screen so that when the user hovers over the images, the icons will come down into position as they are being called by: transform: translateY(75px); under .folio4:hover a.icon and .folio4:hover a.icon2 which positions the elements in the desired locations.

And that’s the 4 css3 portfolio hover over effects in a nutshell. I hope you enjoyed this tutorial and please leave your feedback below.

Sign On Up..

Enjoyed this tutorial? Please consider signing up to our newsletter by entering your email address in the form below. You will receive our recent blog updates, our exclusives, top resources and latest web trends all in your inbox. We value your privacy and will not re-distribute your email address. Plus no spam!

Author: Jake

Share This Post On
  • Warren

    Hi Jake, thanks for all this great stuff as a beginner I really appreciate it. Now, the challenge I have is that I wanted to know if you were familiar with Adobe MUSE and how I could implement the code into a project I’m working on for myself. I have tried to submit the code into the right places as per your directions but it’s not exactly working the way it was designed. Are you able to share any thoughts please? I can email you a more detailed description if that would help.
    Cheers,
    Warren

    • http://www.develop-a-website.com/ Jake

      Hi Warren, I’ve never used adobe muse before so I won’t be much help in that department.

      Do you have a link so I could view them and determine what’s wrong?

      • Warren

        Hi Jake, thank you for replying it’s greatly appreciated. I’ve managed to figure out most of it apart from one small thing. I tried to connect a link to the next page as follows but it doesn’t work! Am I missing something or is it in the wrong place.

        +

        • http://www.develop-a-website.com/ Jake

          Which portfolio item are you using 1,2,3 or 4? The link would go in where it says href=”#” you put the address where the # sign is, is that what you mean?