Overlay screen with transparency achieve by using position: relative and absolute

New trick learned by doing build this layout, have transparent under my two foundation columns. The looking is like this:

transparent wrap under two columns

The div layout is like this:

<div class=”clearfix blueWrap”>
<div class =”orangeWrap”></div>
<!– below two columns is the purple wrap in the picture –>
<div class=”medium-6 columns”></div>
<div class=”medium-6 columns”></div>

 just few line of css:
        background-color: rgba(68, 68, 68, 0.47);

then just use the foundation media query to make sure when it was in the big screen don’t display that transparent overlay screeen.

@media only screen and (min-width: 64.063em) {
.orangeWrap {

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s