American Sports Leagues

American Sports Leagues.markdown

American Sports Leagues

Animating an html list of cities based on radio inputs. Using advanced css selectors and data attributes to base animations off of.

A Pen by C-Rodg on CodePen.

License.

index.html

<div class="container">
		<h1>American Sports Leagues</h1>

		<input id="nba" type="radio" name="leagues">
		<label for="nba">NBA</label>
		<input id="mls" type="radio" name="leagues">
		<label for="mls">MLS</label>
		<input id="nfl" type="radio" name="leagues">
		<label for="nfl">NFL</label>
		<input id="nhl" type="radio" name="leagues">
		<label for="nhl">NHL</label>
		<input id="mlb" type="radio" name="leagues">
		<label for="mlb">MLB</label>

		
		<br/>
		
		<ul class="city">
			<li id="seattle" data-teams="mls mlb nfl">
				<h2>Seattle</h2>
				<img src="http://www.dansorensenphotography.com/wp-content/uploads/seattle-space-needle-kerry-park-night-256x256.jpg" alt="">
			</li>
			<li id="boston" data-teams="mls mlb nfl nhl nba">
				<h2>Boston</h2>
				<img src="http://www.massvacation.com/wp-content/uploads/2013/06/1_boston__0000_istock_000011012295large.jpg" alt="">
			</li>
			<li id="losangeles" data-teams="mls mlb nba nhl">
				<h2>Los Angeles</h2>
				<img src="http://www.dorchestercollection.com/uploads/images/Collection/FullLengthImages/Medium/city-los-angeles-luxury.jpg" alt="">
			</li>

			<li id="sanantonio" data-teams="nba">
				<h2>San Antonio</h2>
				<img src="http://foto.hrsstatic.com/fotos/3/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F3%2F3%2F1%2F133105%2F133105_u_5942618.jpg/Dy4p%2BghnKrUEWitTKO03Lg%3D%3D/197,141/1/BEST_WESTERN_ALAMO_SUITES-San_Antonio-Info-9-133105.jpg" alt="">
			</li>
			<li id="portland" data-teams="mls nba">
				<h2>Portland</h2>
				<img src="http://www.yourroadmaptohome.com/blog/wp-content/uploads/2010/09/A-MADE-IN-OREGON-B.gif" alt="">
			</li>
			<li id="sanfran" data-teams="mlb nfl nba">
				<h2>San Francisco</h2>
				<img src="https://s-media-cache-ak0.pinimg.com/236x/92/51/75/925175d9f70df42b68179fe38c76f603.jpg" alt="">
			</li>
			<li id="newyork" data-teams="mls mlb nfl nhl nba">
				<h2>New York</h2>
				<img src="http://images.wildtangent.com/monumentbuilderslibertyandroid/big_icon.jpg" alt="">
			</li>
			<li id="chicago" data-teams="mls mlb nfl nhl nba">
				<h2>Chicago</h2>
				<img src="http://foto.hrsstatic.com/fotos/3/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F3%2F9%2F0%2F139035%2F139035_u_2784013.jpg/D0sszCpwmkCYpm7Tts95UQ%3D%3D/128,128/1/Hampton_Inn_Chicago-Gurnee-Warren-Gurnee-Info-10-139035.jpg" alt="">
			</li>
			<li id="houston" data-teams="mlb nfl nba">
				<h2>Houston</h2>
				<img src="https://pbs.twimg.com/profile_images/3462541504/e251cbe377d8d873060165a38fb5d5ba.jpeg" alt="">
			</li>
			<li id="philly" data-teams="mls mlb nfl nhl nba">
				<h2>Philadelphia</h2>
				<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F3%2F2%2F4%2F132430%2F132430_u_6063743.jpg/GoU04IQR%2B%2BW4qDvXOnjxkw%3D%3D/196,280/1/Holiday_Inn_Express_PHILADELPHIA_E_-_PENNS_LANDING-Philadelphia-Info-20-132430.jpg" alt="">
			</li>
			<li id="sandiego" data-teams="mlb nfl">
				<h2>San Diego</h2>
				<img src="http://www.orbitz.com/public/ANS/Dynaflex/Images/TravelGuide/SanDiego-California_Intro_345x225.jpg" alt="">
			</li>
			<li id="dallas" data-teams="mls nfl nba mlb nhl">
				<h2>Dallas</h2>
				<img src="https://media-cdn.tripadvisor.com/media/photo-s/01/70/fb/0c/dallas-skyline-texas.jpg" alt="">
			</li>
			<li id="detroit" data-teams="nhl mlb nfl nba">
				<h2>Detroit</h2>
				<img src="http://www.gannett-cdn.com/-mm-/e3609889c8ffd082e61a6d6eefc12014774fa3ec/c=331-0-3521-2398&r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2014/02/21//1392998353000-022114detroit-skyline.jpg" alt="">
			</li>
			<li id="sanjose" data-teams="mls nhl">
				<h2>San Jose</h2>
				<img src="https://geography2144gpriyapatel.files.wordpress.com/2012/03/san-jose1.jpg" alt="">
			</li>
			<li id="indy" data-teams="nfl nba">
				<h2>Indianapolis</h2>
				<img src="http://homewoodsuites3.hilton.com/resources/media/hw/INDHWHW/en_US/img/shared/full_page_image_gallery/main/hw_whiteriver_4_505x305_FitToBoxSmallDimension_Center.jpg" alt="">
			</li>
			<li id="jacksonville" data-teams="nfl">
				<h2>Jacksonville</h2>
				<img src="http://bungobox.com/images/uploads/jacksonville_skyline.jpg" alt="">
			</li>
			<li id="memphis" data-teams="nba">
				<h2>Memphis</h2>
				<img src="http://www.graceland.com/!userfiles/Plan%20Your%20Trip/Memphis_VerticalResponsive.jpg" alt="">
			</li>
			<li id="baltimore" data-teams="nfl mlb">
				<h2>Baltimore</h2>
				<img src="http://hopesprings.org/wp-content/uploads/2011/06/400px-Baltimore24.jpg" alt="">
			</li>
			<li id="dc" data-teams="nhl nba mls mlb nfl">
				<h2>Washington D.C.</h2>
				<img src="http://alumni.umich.edu/clubs/sites/default/files/uploads/washington_dc.jpg" alt="">
			</li>
			<li id="denver" data-teams="nba nhl mls mlb nfl">
				<h2>Denver</h2>
				<img src="https://synoptek.com/wp-content/uploads/2014/09/denvercity.jpg" alt="">
			</li>
			<li id="okc" data-teams="nba">
				<h2>Oklahoma City</h2>
				<img src="http://archrecord.construction.com/features/2012/American-City/Oklahoma/Oklahoma-City-essay-main.jpg" alt="">
			</li>

		</ul>
	</div>

style.css

body, html {
  background-color: rgb(26, 65, 74);
  background: #2980b9;
  font-family: 'Roboto', sans-serif;
}
.container {
			max-width: 1024px;
			margin: 0 auto;
      text-align: center;
  color: white;
		}

h1 {
  font-size: 35px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f9f9f9;
}

		.city li {
			display:inline-block;
			position:relative;
			margin: 10px;
			padding: 0;
			width: 100px;
			height: 100px;
		}

		.city h2 {
			display: none;
			position: absolute;
			z-index: 2;
			top: 70px;
			left: 0;
			right: 0;
			margin: 0;
			padding: 4px;
			border: 1px solid #ccc;
			color: #fff;
			background-color: #000;
			font-size: 14px;
			font-weight: normal;
		}

input {
  margin-left: -9999px;
  position: absolute;
}
label {
  border: 1px solid #fff;
  padding: 10px 14px;
  cursor: pointer;
  background: transparent;
  border-radius: 2px;
  transition: background 0.25s;
  letter-spacing: 0.5px;
}

label:hover {
  background: #1B5479;
}

input:checked + label {
  background: #1B5479;
}

		.city img {
			width: 100px;
			height: 100px;
			border: 4px solid #fff;
			border-radius: 50%;
			background-color: #fff;
			box-shadow: 0 0 20px #000;
			opacity: .25;
			transform: scale(.5);
		}


		#nba:checked ~ .city [data-teams~="nba"] h2,
		#nfl:checked ~ .city [data-teams~="nfl"] h2,
		#nhl:checked ~ .city [data-teams~="nhl"] h2,
		#mls:checked ~ .city [data-teams~="mls"] h2,
		#mlb:checked ~ .city [data-teams~="mlb"] h2 {
			display: block;
		}
		#nba:checked ~ .city [data-teams~="nba"] img,
		#nfl:checked ~ .city [data-teams~="nfl"] img,
		#nhl:checked ~ .city [data-teams~="nhl"] img,
		#mls:checked ~ .city [data-teams~="mls"] img,
		#mlb:checked ~ .city [data-teams~="mlb"] img {
			animation: addIn .3s forwards;
		}

		@-webkit-keyframes addIn {
			70% {
				opacity: 1;
				transform: scale(1.1);
			}
			100% {
				opacity: 1;
				transform: scale(1);
			}
		}

		@keyframes addIn {
			70% {
				opacity: 1;
				transform: scale(1.1);
			}
			100% {
				opacity: 1;
				transform: scale(1);
			}
		}