By now, most people have at least heard of Google+, and I read the other day that 10 million people have already signed up for this latest social network. That kind of growth has marked it as the fastest growing social network around. And it’s not even out of beta, nor is it open to the public. To join Google+, you either have to send Google your email address stating that you’re interested in joining, or you need to know someone with available invitations.
To help complement the features and functionality of Google+, which are abundant in that it combines the best of Twitter and Facebook along with a few bells and whistles of it own, Google+ looks good. The aesthetics of Google+ are sleek, uncluttered and has a very modern feel. To keep this consistency, Google has updated the design for Gmail, Calendar, Docs, Picasa and so on. For some of us, we might never have to leave a Google-branded page for most of the day in that our email, documents, calendar and news are all combined into one simple and convenient header that stays with you as you complete your daily tasks, which can now run the gamut from work to fun.
From my understanding, Google+ is built on HTML5 and CSS3, and has some pretty cool affects. If you look at a person’s profile page, under the Photos section, you’ll see some HTML5, CSS3 and jQuery in action. This article will show you to create the fan and stacking effect as a means to convey a link that opens a page with multiple photos.
Let’s start with the HTML, which provides some clues as to how the CSS will be set up.
<body>
<div id=”page_wrap”>
<div id=”text”>Google+ Stack Effect</div>
<div id=”photo_stack”>
<img id=”photo1″ src=”photos/1.jpg” >
<img id=”photo2″ src=”photos/2.jpg” >
<img id=”photo3″ class=”current” src=”photos/3.jpg” > </div>
<div id=”single_photo”>
<ul id=”pics”>
<li><a href=”#pic1″ title=”Photo”><img src=”photos/3.jpg” alt=”picture”></a></li>
</ul>
</div>
</div>
</body>
Now let’s tackle the CSS. The page_wrap element will be the parent div for the entire page.
#page_wrap {
border: 1px solid #DDDDDD;
width: 700px;
height:400px;
margin-left: auto;//center the content
margin-right: auto;
margin-top:150px;
}
The following image_stack element is used to place the photos so that they look like a stacked pile.
#image_stack img {
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 158px;
height: 158px;
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
As with all CSS3, you’ll notice the vendor-specific code. However, for Internet Explorer, while you will not see the fan affect, the images will spread out in a horizontal fashion.
Here’s how to finish the image_stack parent element:
#image_stack {
width: 400px;
margin: 5em auto;
position: relative;
float:right;
margin-right:20px;
}
Next, we’ll position the three different images:
#image_stack #photo1 {
top: 8px;
left: 108px;
}
#image_stack #photo2 {
top: 6px;
left: 104px;
}
#image_stack #photo3 {
top: 4px;
left: 100px;
}
You will need the following code to create the fan affect when the visitor hovers the mouse over the initial image. You can adjust the degrees to which the images are fanned out, but you might find that the following code will suit your needs:
#image_stack .rotate1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
#image_stack .rotate2 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
#image_stack .rotate3 {Photo 3
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
transform: rotate(-15deg);
cursor: pointer;
}
The jquery code is presented below. It contains two events, one for when the mouse is placed over the image stack and one for when the mouse is removed.
$(document).ready(function() {
$(“#image_stack”).delegate(‘img’, ‘mouseenter’, function() {
if ($(this).hasClass(‘current’)) {
$(‘img#photo1’).addClass(‘rotate1’);
$(‘img#photo2’).addClass(‘rotate2’);
$(‘img#photo3’).addClass(‘rotate3’);
$(‘img#photo1’).css(“left”,”150px”);
$(‘img#photo3’).css(“left”,”50px”);
}
})
.delegate(‘img’, ‘mouseleave’, function() {
$(‘img#photo1’).removeClass(‘rotate1’);
$(‘img#photo2’).removeClass(‘rotate2’);
$(‘img#photo3’).removeClass(‘rotate3’);
$(‘img#photo1’).css(“left”,””);
$(‘img#photo3’).css(“left”,””);
});;
});
Let’s now get back to the CSS styling for a single image, which will expand when a visitor hovers their mouse over it. This technique does not use jQuery, but instead relies solely on CSS3. First, let’s set up the transition effect:
ul#pics li {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 1px 1px 1px #999999;
display: inline-block;
width: 153px;
height:157px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
ul#pics li img {
width: 150px;
height:150px;
display: block;
}
Last, let’s set up the transform that creates the expanded effect:
ul#pics li:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-o-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
This is complicated code and is not meant for beginners or even intermediate coders. If you are at that level, this code can provide a glimpse behind the scenes of how Google is coding their image affects. If you’re an expert developer, than hopefully this provides an excellent starting point for you to recreate this user experience on your own site.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
