Posted on

How To Create an Image Gallery in CSS

Lately I’ve seen lots of image galleries having the same effect: when you hover the mouse over the thumbnails, a “View details” badge will pop up. My portfolio has this effect too:

keira
 
One more example from fhoke:
 
fhoke

In this tutorial I’ll show you how to create a simple photo gallery with this cool effect.

demo

1. CREATE THE “POP-UP” EFFECT

First let’s create the “pop-up badge” effect.

We need two divs: thumb for the image container and circle for the badge that pops up.

HTML Code

<div id="thumb">
<div id="circle"></div></div>

Next grab the “View details” badge here

Now on to styling thumb:

css Code

#thumb {
width:300px;
height:200px;
display:block;
background-color:#7EE4D0;
margin:0 auto;
padding:0;
top:20px;
position:relative;
}

and the badge:

css Code

#circle {
width:300px;
height:200px;
display:block;
position:absolute;
background: url("view-details.png") no-repeat;
background-position:115px 130px;
opacity:0;
transition:0.85s;
-webkit-transition: ease .85s;
-moz-transition: ease .85s;
-o-transition: ease .85s;
-ms-transition: ease .85s;
}

Basically our thumbnail consists of two layers: the thumbnail container layer and the badge layer (on top). Both of them need to have the same size.

Set the background of circle the badge image that you just downloaded by
background: url(“view-details.png”) no-repeat;. Then position it with background-position:115px 130px;, which aligns the badge to the bottom of the container and also centers it like this:

tut1

The badge needs to be hidden and will only show on mouse over. That’s why we need to set its opacity to 0. To “soften” the pop up effect, add transition code. Here I set transition:0.85s, but you can change it to your liking. To make sure that the transition effect works cross browser (especially with Safari), don’t forget these codes:

Transition Code

-webkit-transition: ease .85s;
-moz-transition: ease .85s;
-o-transition: ease .85s;
-ms-transition: ease .85s;

Now it’s time to style circle on mouse over:

css Code

#circle:hover {
opacity:1;
transform: translate(0,-70px);
-webkit-transform: translate(0,-70px);
-o-transform: translate(0,-70px);
-moz-transform: translate(0,-70px);
transition: 0.85s;
-webkit-transition: ease .85s;
-moz-transition: ease .85s;
-o-transition: ease .85s;
-ms-transition: ease .85s;
}

The code transform: translate(0,-70px); makes the badge go up 70px on mouse over:

tut2

That’s it! Now if your code is correct, you’ve created the “pop-up” effect:

Be creative and make your own badge. It can be a heart, a X sign, a + sign,… whatever you want!

2. CREATE THE IMAGE GALLERY

To add an image to the thumbnail container:

HTML Code

<div id="thumb">
<img id="thumb-img" src="Image URL"/>
<div id="circle"></div>
</div>

The image (#thumb-img) needs to cover thumb so we need to set its width:100%; height:100%;

css Code

#thumb-img{
width:100%;
height:100%;
z-index:100;
}

Create a wrapper to wrap our thumbnails:

html Code

<div class="wrapper">
/*Thumbnail 1*/
<div id="thumb">
<img id="thumb-img" src="Image URL"/>
<div id="circle"></div>
</div>
(...)
/*Thumbnail n*/
<div id="thumb">
<img id="thumb-img" src="Image URL"/>
<div id="circle"></div>
</div>
</div>

Set a width for the wrapper and center it:

css Code

.wrapper{
width:1089px;
height:auto;
margin: 0 auto;
padding:0;
}

Now we need to style the thumbnails. For this tutorial we have 3 thumbnails each row. The first row’s thumbnails are thumb and the other rows’ thumbnails are thumb2. Basically their CSS codes are the same, except for the margins.

css Code

#thumb, #thumb2{
width:300px;
height:200px;
display:inline-block;
background-color:white;
position:relative;
border: 10px solid rgba(255, 255, 255, 1);
}
#thumb {
margin:-40px 20px 20px 20px;}
#thumb2{
margin:10px 20px 10px 20px;}

This is optional: I want the thumbnails to have shadows on mouse over so:

css Code

#thumb:hover, #thumb2:hover{
transition:0.5s;
box-shadow:0px 2px 3px rgba(70,53,53,0.4);
}

Make some changes to the circle position since we have the wrapper now:

css Code

#circle{
position:relative;
top:-200px;
display:inline-block;
(other codes)
}

This step is optional too, but I’d like to make the background and the text more visually appealing:

css Code

body{background:url("beige.png") repeat;}
h1{
text-rendering: optimizelegibility;
margin-left:25px;
text-transform:uppercase;
font-family:'BenchNine', cursive; /*Google font*/
font-size:80px;
color:white;
margin-top:40px;
text-shadow:0px 2px 3px rgba(110,83,83,0.4);
}

Now you’ve a nice image gallery to show off your works. Just add a title and credits in the footer and you’re done. If you have any questions or suggestions, feel free to comment below. Happy coding!
 


 

One thought on “How To Create an Image Gallery in CSS

  1. … [Trackback]

    […] Find More on|Find More|Read More Infos here|Here you will find 78954 additional Infos|Infos on that Topic: keirabui.com/how-to-create-a-image-gallery-in-css/ […]

What's your two cents?