Expanding Overlay Effect with css and jQuery free

1-HTML code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<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">             <!-- ... -->         </div>     </li>     <li><!-- ... --></li>     <!-- ... --> </ul>

2-CSS code

THE CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

The unordered list will be centered in its parent and we’ll remove the list style:

1 2 3 4 5

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

The list items will have a fluid width and we’ll give them a height of 15em. The will float left:

1 2 3 4 5 6 7 8 9 10 11 12

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

There are three different widths for our grid items, the “default” one with 24% and then the following other two:

1 2 3 4 5 6 7

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

Let’s style the city name headline:

1 2 3 4

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

We are including a CSS file for the icon font that we are using. It’s the Climacons Fontby Adam Whitcroft. You can check out the climacons.css to see which icons we are including. Basically we are using an icon class to add an icon with a pseudo element. In our grid we want them to be positioned absolutely in the lower right corner, appearing a bit cut off:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

The temperature will be semi-transparent and we’ll add a transition for its opacity:

1 2 3 4 5 6

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

When hovering over a list item, we’ll simply increase it:

1 2 3

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

Now, let’s take a look at the important overlay division. The final view that we’d like to have is a fullscreen overlay, so we’ll set it’s width and height to 100%. We don’t want it to be relative to anything and we want it to be on top of everything, so let’s give it fixed positioning. Since this would make it appear on top of everything and we’d have overlapping, huge overlays all over, we need to initially set the z-index to -1. This will put them all behind the content of the page. Setting the opacity to 0 will make them invisible:

Download 

Demo