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

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!

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

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

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 and use that.

You can achieve the effect with CSS3 transitions.

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

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;  
}

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

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.

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

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?

<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.

#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);
}

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

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

HI,

Chnage the code to this:


#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.

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. :slight_smile:

Woops! My apologies, I misread. :frowning:

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

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:

<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!

Hi,

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


.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)