Designing a Gallery page with CSS3


Creating a Profile page or Team work page on a company website is important, that page usually contains photos of team members and their job titles.

In this tutorial we will try to make the page look more attractive. The idea is to make the bios appear when the mouse is over an image and at the same time the other images will be dimmed as well. Like the following picture. We use CSS Transition and help Opacity 😀

Css3 Hover Animation
Css3 Hover Animation

Materials
Rebel Background Pattern from subtlepattern

2 Doppio One and Noticia Text fonts embedded from Google Webfonts

Avatar Photo of Sarah Parmenter

HTML Structure
<ul class=”profiles”>

<li class=”maurice”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Maurice</div>
<div class=”position”>Co-Founder</div>
<div class=”description”>Vivamus ornare massa in nisl posuere sit amet interdum nisl accumsan. Cras accumsan viverra justo sit amet faucibus.</div>
</div>
</a>
</li>

<li class=”adrian”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Adrian</div>
<div class=”position”>Manager</div>
<div class=”description”>Fusce ornare quam ut leo aliquam et dignissim urna pulvinar</div>
</div>
</a>
</li>

            &lt;!-- Next Member Thumbnail --&gt;

</ul>
there we can see that there is an unordered list (UL), and each member list is accompanied by a brief bio.

CSS
To beautify the HTML structure and make it more animative we will use a lot of css transitions

We will make the page 660px wide, because we need 3 columns for an image that is 200px * 6 and a margin of 10px * 6