Pricing Table - how do they achieve this fade in/out effect?

**dmarie** · Apr 30, 2012 23:29

I like the way Shopify's pricing table (http://www.shopify.com/pricing) has the fade in/out effect.

When you hover over a column in the pricing table, the other columns fade out.

I was wondering if anyone knew how they achieved this effect? I had a look at their source code and they don't seem to be using javascript?

Thanks in advance!

**xhtmlcoder** · May 1, 2012 02:21

It is JavaScript by the looks of things most likely one of the pre-made script libraries they have linked to.

**dmarie** · May 1, 2012 19:14

Right okay, thank you. Can I get a hold of this script to use it on my pricing table?

**RyanReese** · May 2, 2012 19:42

Go for it. It appears they just link the Jquery library and then go to this http://www.modernizr.com/download/#-...mprefixes-load and use that.

**kohoutek** · May 2, 2012 20:03

You can achieve the effect with CSS3 transitions.

To get something like the example you linked to, you'd do something like this:

Code CSS:

table {
    color: rgb(60,60,60);
}
 
table thead {
            background: green;
}
 
table:hover {
    color: rgb(10,10,10);
}
 
 table:hover thead {
  background: yellow;
  -webkit-transition:background 500ms ease-in;  
  -moz-transition:background 500ms ease-in;  
  -o-transition:background 500ms ease-in;  
  transition:background 500ms ease-in;  
}

**Black Max** · May 2, 2012 20:40

Originally Posted by RyanReese

Go for it. It appears they just link the Jquery library and then go to this http://www.modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-shiv-mq-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load]url and use that.[/COLOR]

You got yerself a messed-up URL there, good buddy. Come back.

**RyanReese** · May 2, 2012 20:48

Woops. Try this

http://www.modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-shiv-mq-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load

Edit-You have to copy paste that into the URL bar. I don't know why clicking it doesn't work.

**Paul O'B** · May 3, 2012 08:06

Hi,

Someone asked for something similar in the forums a few months ago and I put up a couple of rough demos.

The first one uses transitions as mentioned by kohoutec above.

http://www.pmob.co.uk/temp/one-on-all-off2.htm

The next one use some jquery for similar effect.

http://www.pmob.co.uk/temp/one-on-all-off5.htm

**dmarie** · May 3, 2012 16:20

Thanks Paul O'B - I'm trying to get your first example working using CSS3 transitions. My HTML's a little different to yours (see below) and I'm trying to make it work. Any ideas on the CSS I'd use?

HTML Code:

<div id="pricing">

		<div class="pricing-columns">
			
			<!-- individual -->
			<div class="column-1 pricing-col column-normal">
				<ul>
					<li>
						<div class="plan-head individual">
							<ul>
								<li class="plan-name">Individual</li>
								<li class="plan-price"><span class="dollar-sign">$</span>49<span class="per-month">/ MO</span></li>
							</ul>
						</div>
						<ul class="features">
							<li><strong><span class="light-green">Free</span></strong> Setup</li>
							<li class="alt"><strong><span class="light-green">1</span></strong> Staff Member</li>
							<li><strong><span class="light-green">Unlimited</span></strong> Users</li>
							<li class="alt"><strong><span class="light-green">Unlimited</span></strong> Locations</li>
							<li><strong><span class="light-green">Unlimited</span></strong> Services</li>
							<li class="alt"><strong><span class="light-green">Unlimited</span></strong> Appointments</li>
							<li><strong><span class="light-green">20</span></strong> SMS Credits</li>
							<li class="alt"><strong><span class="light-green">Free</span></strong> Website</li>
							<li>Online Booking Widget</li>
							<li class="alt">SSL Secure</li>
							<li>Unlimited Support</li>
							<li class="alt">-</li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- end individual -->
		
			<!-- small business -->
			<div class="column-2 pricing-col column-normal">
				<ul>
					<li>
						<div class="plan-head small-business">
							<ul>
								<li class="plan-name">Small Business</li>
								<li class="plan-price"><span class="dollar-sign">$</span>99<span class="per-month">/ MO</span></li>
							</ul>
						</div>
						<ul class="features">
							<li><strong><span class="dark-green">Free</span></strong> Setup</li>
							<li class="alt"><strong><span class="dark-green">10</span></strong> Staff Members</li>
							<li><strong><span class="dark-green">Unlimited</span></strong> Users</li>
							<li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Locations</li>
							<li><strong><span class="dark-green">Unlimited</span></strong> Services</li>
							<li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Appointments</li>
							<li><strong><span class="dark-green">40</span></strong> SMS Credits</li>
							<li class="alt"><strong><span class="dark-green">Free</span></strong> Website</li>
							<li>Online Booking Widget</li>
							<li class="alt">Individual Staff Access</li>
							<li>SSL Secure</li>
							<li class="alt">Unlimited Support</li>

						</ul>
					</li>
				</ul>
			</div>
			<!-- end small business -->
			
			<!-- medium business -->
			<div class="column-3 pricing-col column-normal">
				<ul>
					<li>
						<div class="plan-head medium-business">
							<ul>
								<li class="plan-name">Medium Business</li>
								<li class="plan-price"><span class="dollar-sign">$</span>199<span class="per-month">/ MO</span></li>
							</ul>
						</div>
						<ul class="features">
							<li><strong><span class="light-blue">Free</span></strong> Setup</li>
							<li class="alt"><strong><span class="light-blue">40</span></strong> Staff Members</li>
							<li><strong><span class="light-blue">Unlimited</span></strong> Users</li>
							<li class="alt"><strong><span class="light-blue">Unlimited</span></strong> Locations</li>
							<li><strong><span class="light-blue">Unlimited</span></strong> Services</li>
							<li class="alt"><strong><span class="light-blue">Unlimited</span></strong> Appointments</li>
							<li><strong><span class="light-blue">80</span></strong> SMS Credits</li>
							<li class="alt"><strong><span class="light-blue">Free</span></strong> Website</li>
							<li>Online Booking Widget</li>
							<li class="alt">Individual Staff Access</li>
							<li>SSL Secure</li>
							<li class="alt">Unlimited Support</li>
						</ul>
					</li>
				</ul>
			</div>
			<!-- end medium business -->
			
			<!-- enterprise -->
			<div class="column-4 pricing-col column-normal">
				<ul>
					<li>
						<div class="plan-head enterprise">
							<ul>
								<li class="plan-name">Enterprise</li>
								<li class="plan-price"><span class="dollar-sign">$</span>499<span class="per-month">/ MO</span></li>
							</ul>
						</div>
						<ul class="features">
							<li><strong><span class="dark-blue">Free</span></strong> Setup</li>
							<li class="alt"><strong><span class="dark-blue">Unlimited</span></strong> Staff Members</li>
							<li><strong><span class="dark-blue">Unlimited</span></strong> Users</li>
							<li class="alt"><strong><span class="dark-blue">Unlimited</span></strong> Locations</li>
							<li><strong><span class="dark-blue">Unlimited</span></strong> Services</li>
							<li class="alt"><strong><span class="dark-blue">Unlimited</span></strong> Appointments</li>
							<li><strong><span class="dark-blue">100</span></strong> SMS Credits</li>
							<li class="alt"><strong><span class="dark-blue">Free</span></strong> Website</li>
							<li>Online Booking Widget</li>
							<li class="alt">Individual Staff Access</li>
							<li>SSL Secure</li>
							<li class="alt">Unlimited Support</li>
						</ul>
					</li>
				</ul>
			</div>

The CSS I'm using, this is just making the column fade out when I hover over it.

Code:

#pricing .column-normal {
    -webkit-transition: opacity 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: opacity 1s ease; 
}

#pricing .column-normal:hover,
#pricing .column-normal.over {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

#pricing .column-normal:hover li:hover,
#pricing .column-normal.over li.over {
    opacity:1.0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

**kohoutek** · May 3, 2012 19:43

I gave you an example and it works when you hover over it.

You're using the transition property on the normal state, you only declared :hover for IE filters...

**Paul O'B** · May 4, 2012 01:39

HI,

Chnage the code to this:

Code:

#pricing:hover .pricing-col {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

#pricing:hover .pricing-col:hover{
    opacity:1.0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

I think we can forget about IE6 now but if you want to support it you will need the js that I had in my original and then add the .over rules in place of :hover.

The way it works is that when you hover over the parent div #pricing it fades out all the elements called .pricing-col (which is all of them). Then when you hover over one specific column it removes the fade from that one element only. The effect you get is that as you hover over one element all the other elements fade out.

**Paul O'B** · May 4, 2012 01:44

Originally Posted by kohoutek

I gave you an example and it works when you hover over it.

I believe the OP wanted the reverse effect where the one you hover doesn't change but all the others blocks fade out

You're using the transition property on the normal state.

Transitions work when the element changes so you don't need to declare the transitions on hover specifically and will work fine on the normal state.

**kohoutek** · May 4, 2012 05:20

Originally Posted by Paul O'B

I believe the OP wanted the reverse effect where the one you hover doesn't change but all the others blocks fade out

Woops! My apologies, I misread.

**dmarie** · May 4, 2012 15:28

Perfect, thanks Paul O'B! It's working now and looking great. I appreciate your time in helping me!

**dmarie** · May 5, 2012 18:21

One last question, Paul O'B! I would like to add tooltips to each .li within features .ul

For example, when you hover over each of the following, I would like a tooltip to appear:

Code:

<li><strong><span class="dark-green">Free</span></strong> Setup</li>
<li class="alt"><strong><span class="dark-green">10</span></strong> Staff Members</li>
<li><strong><span class="dark-green">Unlimited</span></strong> Users</li>
<li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Locations</li>
<li><strong><span class="dark-green">Unlimited</span></strong> Services</li>
<li class="alt"><strong><span class="dark-green">Unlimited</span></strong> Appointments</li>
<li><strong><span class="dark-green">40</span></strong> SMS Credits</li>
<li class="alt"><strong><span class="dark-green">Free</span></strong> Website</li>
<li>Online Booking Widget</li>
<li class="alt">Individual Staff Access</li>
<li>SSL Secure</li>
<li class="alt">Unlimited Support</li>

What would be the best way of doing this? I can't seem to figure it out with your example. Thank you!

**Paul O'B** · May 6, 2012 10:43

Hi,

Assuming the spans were the tooltips just do something like this:

Code:

.features{width:15em}
.features li{
	position:relative;
	zoom:1.0;/*ie hack */
	cursor:pointer;
}
.features li span{
	position:absolute;
	left:-999em;
	border:1px solid #0o0;
	background:red;
	color:#fff;
	padding:5px;
	width:100px;
}
.features li:hover span{left:100%}

(not IE6 compatible - you would need to hover an anchor instead of a list for ie6 to work)

User Tag List

Thread: Pricing Table - how do they achieve this fade in/out effect?

Thread Tools

Display

Pricing Table - how do they achieve this fade in/out effect?

Bookmarks

Bookmarks

Posting Permissions