jQuery Plugins › jQuery Animation Plugins ›

Expanding Overlay Effect with jQuery and CSS3

File Size:	92.8 KB
Views Total:	5561
Last Update:	01/18/2013 01:17:14 UTC
Publish Date:	01/18/2013 01:29:20 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to use it:

1. Markup

<ul id="rb-grid" class="rb-grid clearfix">
<li class="icon-clima-1 rb-span-2">
<h3>Lisbon</h3>
<span class="rb-temp">21°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Lisbon</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>19°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>18°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>17°C</span></div>
<div><span>Fri</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>18°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-2">
<h3>Paris</h3>
<span class="rb-temp">11°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Paris</span><span class="icon-clima-2"></span><span>11°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>12°C</span></div>
<div><span>Tue</span><span class="icon-clima-4"></span><span>11°C</span></div>
<div><span>Wed</span><span class="icon-clima-4"></span><span>10°C</span></div>
<div><span>Thu</span><span class="icon-clima-4"></span><span>9°C</span></div>
<div><span>Fri</span><span class="icon-clima-2"></span><span>10°C</span></div>
<div><span>Sat</span><span class="icon-clima-2"></span><span>10°C</span></div>
<div><span>Sun</span><span class="icon-clima-2"></span><span>12°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-1">
<h3>Belgrade</h3>
<span class="rb-temp">15°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Belgrade</span><span class="icon-clima-1"></span><span>15°C</span></div>
<div><span>Mon</span><span class="icon-clima-3"></span><span>16°C</span></div>
<div><span>Tue</span><span class="icon-clima-3"></span><span>17°C</span></div>
<div><span>Wed</span><span class="icon-clima-3"></span><span>15°C</span></div>
<div><span>Thu</span><span class="icon-clima-4"></span><span>13°C</span></div>
<div><span>Fri</span><span class="icon-clima-3"></span><span>10°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>11°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>12°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-4">
<h3>Moscow</h3>
<span class="rb-temp">2°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Moscow</span><span class="icon-clima-4"></span><span>1°C</span></div>
<div><span>Mon</span><span class="icon-clima-4"></span><span>-1°C</span></div>
<div><span>Tue</span><span class="icon-clima-6"></span><span>-2°C</span></div>
<div><span>Wed</span><span class="icon-clima-6"></span><span>-6°C</span></div>
<div><span>Thu</span><span class="icon-clima-6"></span><span>-4°C</span></div>
<div><span>Fri</span><span class="icon-clima-5"></span><span>-5°C</span></div>
<div><span>Sat</span><span class="icon-clima-6"></span><span>-6°C</span></div>
<div><span>Sun</span><span class="icon-clima-6"></span><span>-8°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-1">
<h3>New Delhi</h3>
<span class="rb-temp">17°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">New Delhi</span><span class="icon-clima-1"></span><span>17°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>18°C</span></div>
<div><span>Tue</span><span class="icon-clima-8"></span><span>19°C</span></div>
<div><span>Wed</span><span class="icon-clima-8"></span><span>16°C</span></div>
<div><span>Thu</span><span class="icon-clima-10"></span><span>17°C</span></div>
<div><span>Fri</span><span class="icon-clima-10"></span><span>18°C</span></div>
<div><span>Sat</span><span class="icon-clima-2"></span><span>17°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>17°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-1">
<h3>Tel Aviv</h3>
<span class="rb-temp">23°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Tel Aviv</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>23°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>22°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>22°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>21°C</span></div>
<div><span>Fri</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Sat</span><span class="icon-clima-2"></span><span>21°C</span></div>
<div><span>Sun</span><span class="icon-clima-2"></span><span>24°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-2">
<h3>Cairo</h3>
<span class="rb-temp">21°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Cairo</span><span class="icon-clima-2"></span><span>21°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Tue</span><span class="icon-clima-1"></span><span>20°C</span></div>
<div><span>Wed</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Thu</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Fri</span><span class="icon-clima-2"></span><span>21°C</span></div>
<div><span>Sat</span><span class="icon-clima-2"></span><span>22°C</span></div>
<div><span>Sun</span><span class="icon-clima-2"></span><span>23°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-11">
<h3>New York</h3>
<span class="rb-temp">3°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">New York</span><span class="icon-clima-11"></span><span>3°C</span></div>
<div><span>Mon</span><span class="icon-clima-11"></span><span>3°C</span></div>
<div><span>Tue</span><span class="icon-clima-11"></span><span>-1°C</span></div>
<div><span>Wed</span><span class="icon-clima-11"></span><span>-2°C</span></div>
<div><span>Thu</span><span class="icon-clima-7"></span><span>1°C</span></div>
<div><span>Fri</span><span class="icon-clima-7"></span><span>0°C</span></div>
<div><span>Sat</span><span class="icon-clima-11"></span><span>2°C</span></div>
<div><span>Sun</span><span class="icon-clima-11"></span><span>3°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-2 rb-span-2">
<h3>San Francisco</h3>
<span class="rb-temp">15°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">San Francisco</span><span class="icon-clima-2"></span><span>15°C</span></div>
<div><span>Mon</span><span class="icon-clima-2"></span><span>16°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>14°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>13°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>15°C</span></div>
<div><span>Fri</span><span class="icon-clima-2"></span><span>15°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>16°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>15°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-2">
<h3>Tokyo</h3>
<span class="rb-temp">8°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Tokyo</span><span class="icon-clima-2"></span><span>8°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>7°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>6°C</span></div>
<div><span>Wed</span><span class="icon-clima-1"></span><span>8°C</span></div>
<div><span>Thu</span><span class="icon-clima-1"></span><span>8°C</span></div>
<div><span>Fri</span><span class="icon-clima-2"></span><span>6°C</span></div>
<div><span>Sat</span><span class="icon-clima-2"></span><span>5°C</span></div>
<div><span>Sun</span><span class="icon-clima-2"></span><span>5°C</span></div>
</div>
</div>
</li>
<li class="icon-clima-4 rb-span-4">
<h3>Sydney</h3>
<span class="rb-temp">25°C</span>
<div class="rb-overlay"> <span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Sydney</span><span class="icon-clima-4"></span><span>28°C</span></div>
<div><span>Mon</span><span class="icon-clima-4"></span><span>24°C</span></div>
<div><span>Tue</span><span class="icon-clima-4"></span><span>26°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>27°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>30°C</span></div>
<div><span>Fri</span><span class="icon-clima-8"></span><span>31°C</span></div>
<div><span>Sat</span><span class="icon-clima-8"></span><span>29°C</span></div>
<div><span>Sun</span><span class="icon-clima-8"></span><span>29°C</span></div>
</div>
</div>
</li>
</ul>

2. CSS

.rb-grid {
	list-style: none;
	text-align: center;
	margin: 0 auto;
}

.rb-grid li {
	width: 24%;
	height: 15em;
	margin: 0.5%;
	background: #8CC7DF;
	color: #fff;
	display: block;
	float: left;
	padding: 1.6em;
	cursor: pointer;
	position: relative;
}

.rb-grid li.rb-span-2 {
	width: 49%;
}

.rb-grid li.rb-span-4 {
	width: 99%;
}

.rb-grid li h3 {
	font-size: 2.6em;
	font-weight: 100;
}

.rb-grid li[class^="icon-"]:before,
.rb-grid li[class*=" icon-"]:before {
	font-size: 10em;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	line-height: 3;
	opacity: 0.4;
	text-align: right;
	pointer-events: none;
}

.rb-temp {
	display: block;
	font-size: 2em;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.rb-grid li:hover .rb-temp {
	opacity: 1;
}

.rb-overlay {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	z-index: -1;
	pointer-events: none;
	cursor: default;
}

.rb-close {
	position: absolute;
	top: 0.4em;
	right: 0.4em;
	width: 2em;
	height: 2em;
	text-indent: -9000px;
	cursor: pointer;
	z-index: 1000;
}

.rb-close::before {
	content: 'x';
	font-weight: 100;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 3em;
	line-height: 0.6;
	text-align: center;
	text-indent: 0px;
}

.rb-week {
	width: 100%;
	height: 100%;
}

.rb-week > div {
	width: 10%;
	height: 100%;
	float: left;
	position: relative;
	padding: 3% 0;
}

.rb-week > div:first-child {
	width: 30%;
}

.rb-week span {
	padding: 5% 0;
	font-size: 2em;
	font-weight: 100;
	display: block;
	margin: auto 0;
	height: 30%;
	width: 100%;
	line-height: 0.8;
}

.rb-week span.rb-city {
	font-weight: 700;
	padding: 1% 10%;
	font-size: 1em;
	line-height: 1.2;
}

.rb-week [class^="icon-"]:before {
	font-size: 2.5em;
	font-weight: normal;
}

.rb-week > div:first-child [class^="icon-"] {
	opacity: 0.1;
}

/* Colors */

/* Grid */
.rb-grid li:nth-child(1) { background: #3399CC; }
.rb-grid li:nth-child(2) { background: #33CCCC; }
.rb-grid li:nth-child(3) { background: #996699; }
.rb-grid li:nth-child(4) { background: #C24747; }
.rb-grid li:nth-child(5) { background: #e2674a; }
.rb-grid li:nth-child(6) { background: #FFCC66; }
.rb-grid li:nth-child(7) { background: #99CC99; }
.rb-grid li:nth-child(8) { background: #669999; }
.rb-grid li:nth-child(9) { background: #CC6699; }
.rb-grid li:nth-child(10) { background: #339966; }
.rb-grid li:nth-child(11) { background: #666699; }

/* Overlay Columns */
.rb-grid li:nth-child(1) .rb-week > div:nth-child(1) { background: #3399CC; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(2) { background: #2D87B4; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(3) { background: #297AA3; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(4) { background: #256E93; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(5) { background: #216283; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(6) { background: #1D5672; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(7) { background: #184962; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(8) { background: #143D52; }

.rb-grid li:nth-child(2) .rb-week > div:nth-child(1) { background: #33CCCC; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(2) { background: #2DB4B4; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(3) { background: #29A3A3; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(4) { background: #259393; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(5) { background: #218383; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(6) { background: #1D7272; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(7) { background: #186262; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(8) { background: #145252; }

.rb-grid li:nth-child(3) .rb-week > div:nth-child(1) { background: #996699; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(2) { background: #936293; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(3) { background: #875A87; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(4) { background: #7A527A; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(5) { background: #6E496E; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(6) { background: #624162; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(7) { background: #563956; }
.rb-grid li:nth-child(3) .rb-week > div:nth-child(8) { background: #493149; }

.rb-grid li:nth-child(4) .rb-week > div:nth-child(1) { background: #C24747; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(2) { background: #B83D3D; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(3) { background: #A83838; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(4) { background: #993333; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(5) { background: #8A2E2E; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(6) { background: #7A2929; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(7) { background: #6B2424; }
.rb-grid li:nth-child(4) .rb-week > div:nth-child(8) { background: #5C1F1F; }

.rb-grid li:nth-child(5) .rb-week > div:nth-child(1) { background: #e2674a; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(2) { background: #E05C3E; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(3) { background: #DD4D2C; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(4) { background: #D34322; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(5) { background: #C13D1F; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(6) { background: #AF371D; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(7) { background: #9E321A; }
.rb-grid li:nth-child(5) .rb-week > div:nth-child(8) { background: #8C2C17; }

.rb-grid li:nth-child(6) .rb-week > div:nth-child(1) { background: #FFCC66; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(2) { background: #FFC247; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(3) { background: #FFBB33; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(4) { background: #FFB41F; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(5) { background: #FFAD0A; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(6) { background: #F5A300; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(7) { background: #E09600; }
.rb-grid li:nth-child(6) .rb-week > div:nth-child(8) { background: #CC8800; }

.rb-grid li:nth-child(7) .rb-week > div:nth-child(1) { background: #99CC99; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(2) { background: #85C185; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(3) { background: #77BB77; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(4) { background: #6AB46A; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(5) { background: #5CAD5C; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(6) { background: #52A352; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(7) { background: #4B954B; }
.rb-grid li:nth-child(7) .rb-week > div:nth-child(8) { background: #448844; }

.rb-grid li:nth-child(8) .rb-week > div:nth-child(1) { background: #669999; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(2) { background: #629393; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(3) { background: #5A8787; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(4) { background: #527A7A; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(5) { background: #496E6E; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(6) { background: #416262; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(7) { background: #395656; }
.rb-grid li:nth-child(8) .rb-week > div:nth-child(8) { background: #314949; }

.rb-grid li:nth-child(9) .rb-week > div:nth-child(1) { background: #CC6699; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(2) { background: #C7578F; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(3) { background: #C24785; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(4) { background: #B83D7A; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(5) { background: #A83870; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(6) { background: #993366; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(7) { background: #8A2E5C; }
.rb-grid li:nth-child(9) .rb-week > div:nth-child(8) { background: #7A2952; }

.rb-grid li:nth-child(10) .rb-week > div:nth-child(1) { background: #339966; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(2) { background: #2E8A5C; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(3) { background: #297A52; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(4) { background: #246B47; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(5) { background: #1F5C3D; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(6) { background: #194D33; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(7) { background: #143D29; }
.rb-grid li:nth-child(10) .rb-week > div:nth-child(8) { background: #0F2E1F; }

.rb-grid li:nth-child(11) .rb-week > div:nth-child(1) { background: #666699; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(2) { background: #626293; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(3) { background: #5A5A87; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(4) { background: #52527A; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(5) { background: #49496E; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(6) { background: #414162; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(7) { background: #393956; }
.rb-grid li:nth-child(11) .rb-week > div:nth-child(8) { background: #313149; }

@media screen and (max-width: 63.125em) {
	
	.rb-grid li,
	.rb-grid li.rb-span-2,
	.rb-grid li.rb-span-4 {
		width: 100%;
		height: 10em;
		text-align: left;
	}

	.rb-grid li[class^="icon-"]:before,
	.rb-grid li[class*=" icon-"]:before {
		font-size: 6em;
		left: auto;
		right: 0;
		line-height: 2.5;
	}

	.rb-grid li > div {
		text-align: center;
	}
}

3. Include necessary javasript library

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="js/jquery.fittext.js"></script> 
<script src="js/boxgrid.js"></script>

4. Initialization

<script>
	$(function() {

Boxgrid.init();


	});
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.

Expanding Overlay Effect with jQuery and CSS3

How to use it:

Related jQuery Plugins

You Might Also Like

Add Your Review