Today we will create some interesting effect for your portfolio or gallery on your website. If you are promoting yourself online via your own website, you should always include some examples of your work. You have to advertise yourself and your work as much as you can because no one else will do it for you, at least not in the beginning. So don’t be shy and let’s get your hands a bit dirty…
When it comes to designing the portfolio part, you can go in three ways. First is to include plain images of your work (website screenshots). This is the most often used solution. Second is to include clickable image with link to live demo of your work hosted online. This will raise the quality and appeal of your portfolio more than just some plain images. Live demos are always better than static images. If some potential client has a chance to visit the real page, it feels different from looking at some picture. The last option is the most challenging to do, but I think, also the best one to go with. Creating portfolio with image, live demo link and… Case study!
If you don’t know what case study is I will explain it to you. Case study cover the whole design process of something. It shows what was the philosophy and individual steps behind creating the final product, how you came from A to B. The length of case study is highly individual and depends solely on you. It can be couple pages or just couple of notes in the list. You can go deep and examine every detail or name only the most important things and forget the rest. I will talk more in-depth about the case study in future article. All you need to need now is that case study is simply a story, purpose and goals behind the design.
After short explanation, we will list our goals for today.
– creating overlay for our images
– overlay will include two buttons
– first button will redirect the user (potential client) to live demo
– second button will redirect to short case study for that work
– the overlay will be visible only when hovering over images
I will leave the structure of the html document to you and start with a container for our picture. Every picture will be nested in a div with class “container” with one more div with class “overlay”. After the overlay div we will add our picture. I will use a picture of a cat hosted on imgur. The code will look like this:
<div class="container"> <div class="overlay"></div> <img src="http://i.imgur.com/d9Jr0za.jpg" alt="Cat in the nature"> </div>
In the next step, we will add two buttons into our overlay div. First button will be “Live Demo” and the second “Case Study”.
<div class="container"> <div class="overlay"> <a href="#">Live Demo</a> <a href="#">Case Study</a> </div> <img src="http://i.imgur.com/d9Jr0za.jpg" alt="Cat in the nature"> </div>
Great, this is all work we have to do in HTML and so we will move to CSS.
First we will create rule for our container to set its position, width and height.
.container {
position: relative;
width: 500px;
height: 333px;
}
We set position to relative in order to use absolute positioning on the overlay div. With absolute position we can “place” the overlay over the image and then use z-index to put in on top of it – cover it. The width and height properties are for image to limit its size a bit. Next, the rule for our image.
.container img {
position: relative;
z-index: 1;
width: 100%;
}
The image is set to relative position so we can use z-index. The defined value is 1. Everything that will have higher value will then be on top of this image.
In rule for overlay we will define absolute positioning to cover the image alongside with z-index higher than 1 to “put” this layer on top. We will also set the width and height to 100% to cover whole size the container. As a background we will go with lighter black in rgba value with alpha (transparency) of .6 (in other words 60% transparent). We will also use line-height and text-align to center our <a> tags.
.overlay {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(2,2,2,.6);
line-height: 333px;
text-align: center;
}
By setting line-height to the height of the container we will center our <a> tags vertically. Text-align will take about about horizontal centering.
Now let’s style our links (buttons). We will make them bigger with padding, set some background and color, add a border on the bottom with small radius, set bolder font weight and remove their decoration (underline).
a {
padding: 1em 2em;
background: #ecf0f1;
color: #000;
border-bottom: 3px solid #bdc3c7;
border-radius: 4px;
font-weight: bold;
text-decoration: none;
}
Also we will not forget to play with styles for focus, hover and active states of our <a> tags. Every state will differ with color of background and border (focus and hover also in color of text).
a:focus,
a:hover {
background: #95a5a6;
color: #fff;
border-color: #7f8c8d;
}
a:active {
background: #34495e;
border-color: #2c3e50;
}
One more thing … Sans serif will look much better for anchor tags text.
a {
padding: 1em 2em;
background: #ecf0f1;
color: #000;
border-bottom: 3px solid #bdc3c7;
border-radius: 4px;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
}
Well done. We have nice flat buttons with simple and clean design. Now the only thing left is to hide the overlay on default and show it only when user hover over the image. First, let’s add a display with value of none to our .overlay rule.
.overlay {
display: none;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(2,2,2,.6);
line-height: 333px;
text-align: center;
}
Now the hover effect …
.container:hover .overlay {display: initial}
By this, when you hover over the container with image, the value of overlay display property will be changed to initial. Divs are block elements, so the value will be “block”.
That is all! As you can see, we didn’t need any JavaScript involved to create this overlay effect for our portfolio. Below is a link to codepen where you can see this in real live.
Codepen example:
https://codepen.io/d3v3r0/pen/AKjbB
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
