Circled Portfolio with Hover effects – Pure CSS

Today i am going to explain how to create Pure CSS Based Circled Portfolio with Hover Effect like Above, generally when it is used at your bottom of the webpage it looks really awesome, want a live preview : Click Here

Here i am going to explain this tutorial in 3 Steps

1. Creating the portfolio background
2. Creating circle
3. Creating Hover effect

Step 1: Creating the portfolio background

HTML Markup:

[code lang=”html”]
<div class="portfolio">
</div>
[/code]

The above will result nothing unless we add the css for the class “portfolio”. Let’s add the CSS for the class portfolio.

CSS:

[code lang=”css”]
<style type="text/css">
.portfolio
{
/* positioning the div */
position:fixed;
bottom:0px;
left:0px;

/* setting the width */
width:100%;

/* setting padding for  alignment */
padding-top:30px;
padding-bottom:30px;

/* setting background color for portfolio */
background:#617798;

/* setting height for portfolio */
height:100px;

/* setting shadow up for portfolio */
box-shadow:0px -5px 10px silver;
box-shadow:0px -5px 10px silver;
box-shadow:0px -5px 10px silver;
}

[/code]

Step 2: Creating Circles

We can create circle using css in different ways. lets create a circle using ul elements.

[code lang=”html”]
<div class="portfolio">
<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

[/code]

The above will result nothing unless we add some css. Let’s add some css.

[code lang=”css”]

<style type="text/css">

ul
{
/* setting list style none for list items */
list-style:none;
}

ul li,ul li *
{
/* setting height and width */

width: 100px;
height: 100px;

/* setting background color for circle */
background: white;

/* turning the shape of square to circle by setting border-radius */
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

/* setting transition for delay */
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
box-shadow:inset 0px 0px 50px silver;
box-shadow:inset 0px 0px 50px silver;
box-shadow:inset 0px 0px 50px silver;

/*  adjusting all list elements side by side */
float:left;

/* setting gap between circles */
margin-right:20px;
<pre>
}

[/code]

The above will result

In those “li” elements you can insert images using img tag. The circle effect will also applied for those images.

Here for li we applied CSS so that same CSS will apply for the elements which are inside the li of ul tag

[code lang=”css”]

ul li,ul li *

{

/* your css */

}

[/code]

The above css will be applied for both “li elements which are inside the ul” and “every element ( * ) inside the li element of the ul elements” .

Note: * indicates every element in CSS.

Step 3: Creating Hover Effect

In order to specify the css when the element is hover then we can use the pseudo selector  “:hover”

[code lang=”css”]

ul li:hover

{
<span style="font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: 13px; line-height: 19px;">/* moving the circle from its position to top */
margin-top:-30px;</span>
}
[/code]

The result of above will be

Placing an Image for circle:

[code lang=”html”]

<div class="portfolio">

<ul>

<li>

<a href="location"><img src="your image path"></a>

</li>

</ul>

</div>

[/code]

And Finally the result is