CODEWITHSUNDEEP
javascripthtmlcss
john
john

Reputation: 11709

opacity on left nav but until a particular area

I have a original image on the whole page and then I have a left navigation with totally black image which is on that same original image. So now my page is divided in left and right where left has black image and right has original image. Now on the right portion I have a div in the middle with some content in it which is in grey box.

Here is my jsfiddle: https://jsfiddle.net/g2ahx6nq/6/

Now this is what I have to do on the left nav side:

Is this possible to do by any chance? On the left nav side - top portion above grey div should show transparent original image using opacity and just below it will be black image which I already have.

Below is my full html code I have:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="top">
        <img class="imgA1" src="assets\img\Uploads\homepage-image-1.png">
    </div>

    <div id="leftBar">
        <img class="logo" src="assets\img\Uploads\northman-logo.png">
        <br />

        <ul id="navigation">
            <li><a href="#">Text1</a>
            </li>
            <li><a href="#">Text2</a>
            </li>
            <li><a href="#">Text3</a>
            </li>
            <li><a href="#">Text4</a>
            </li>
            <li><i class="fa fa-facebook-square" style="float:left"></i>
            </li>
            <li><i class="fa fa-twitter-square" style="float:left"></i>
            </li>
            <li><i class="fa fa-instagram" style="float:left"></i>
            </li>
        </ul>
    </div>
    <div class="leftBar-bottom">
    </div>

    <!-- End Side bar div-->
    <div class="company-bio">
        <p align="center" style="font-family: Adelle PE">Hello World </p>
        <p align="center" style="font-family: Adelle PE">Nice Text! </p>
        <p align="center">Hello David</p>
    </div>

</body>

</html>

Update:

Now I am trying to do very simple thing but I am not sure how I can do that.. I have this image which is exactly same as my left nav where top portion is little bit transparent and bottom is black image.

So on the left nav bar I want to put few things just above the spot where black image is getting started - exactly as I have in that image link. I have added below line just below the div but it's not getting shown at the right spot:

<a class="login" href="#">Log In&nbsp&nbsp&nbsp&nbsp&nbsp|</a> 
<a class="login" href="#">Sign Up</a>

And also how can we get corresponding facebook, twitter and camera-retro image. I believe we need to use fontawesome here but I am confuse.

Upvotes: 0

Views: 62

Answers (2)

Nasir T
Nasir T

Reputation: 2643

You can use html5 svg to clip the orignal image of the size of left bar and use it to be the background of the left panel content. Here is a working example of how to use this feature using your code. Also within the polygon i used 100% in place of y axis or height so that the image is responsive height-wise where the left panel width of 131px being fixed is used as same. This way only the area of the first image seems to overlap the left panel and the rest below it is complete black.

P.S. I adjusted the z-index of navigation and the svg to keep the images in order to show the light image opacity infront of the left black background. And use the #clipimgA1 opacity property to adjust it. I had it set at 0.5.

Hope this helps. Happy coding.

* {
margin:0px;
}

body 
{

  margin: 0px;
  overflow-x: hidden;

}


p, span, h1, h2, h3, h4, h5, h6, td, div, ul, li 
{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
}




img {
  /* Set max width to be 100% of the containing element */
 max-width: 100% ;
max-height: 100%;
}


body .company-bio p
{
	font-family: 'agenda';
       margin-bottom: 20px;
        letter-spacing: .18em;
    font-family: 'agenda';
    font-weight: 400;
   color: rgb(254, 254, 255);
}


div.company-bio
{

}

body .company-bio 
{
padding-top: 40px;


margin-left: 131px;

  /*Added Just now */
padding-bottom: 40px;
max-width:100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");

padding-left: 140px;
  padding-right: 155px;

font-size: 20px;
font-family: "Adelle PE";

}


.top h1
{
	color:#f86d2c;
	font-style: italic;
	font-size:37px;
}


.top p

{
	
color: white !important;
background-color: black;
}

.mission-statements .programs
{
position: relative;
    top: 60px;
width: 300px;
border-style:  solid;
border-width: 4px;
text-align: center;
font-size: 19px;
border-color: #EF7440;
padding: 25px;  
margin: 25px ;
margin-left: auto;
margin-right: auto;
text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.16);
font-family: "adelle regular";
color: rgb(40, 40, 41);
line-height: 1.979;
}





.top h4
{

 font-size: 25px;
  font-family: "ITC Avant Garde Gothic";
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  line-height: 1.792;
  text-align: left;
  -moz-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  -webkit-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  -ms-transform: matrix( 1.65479981820633,0,0,1.66565153423699,0,0);
  position: absolute;
  left: 684.247px;
  top: 280.77px;


}














.top h2
{


position: absolute;
    top: 320px;
    left: 450px;
    letter-spacing: .3em;
    font-size: 22px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0px 3px 6.37px rgba(40, 40, 41, 0.004);
}




body .northmanwild .title
{
	

/* background-image:url(assets/img/Uploads/insta-pics.png); */
width: 100%;
padding-bottom:40px;
padding-top:40px;
text-align: center;
font-size:37px;
margin-top: 0px !important;
margin-bottom: 0px !important;

font-family: "Adelle PE";
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
line-height: 1.979;
text-align: center;
/*text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.5);
opacity: 100%;
fill: 57%;
*/  
}


div.leftBar-bottom
{
  background-image: url("https://s17.postimg.org/yvv4w2gmn/nav-background.png");
  float: left;

}


div.northmanwild
{
    margin-top: -2px;
    width: 90.1%;
    float: right;
    opacity: 0.8;
    margin-bottom: -7px;
 
}


body .footer
{

width: 90.3%;

float: right;
color: rgb(40, 40, 41);
padding-top: 30px;
padding-bottom: 20px;
font-weight: normal;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/footer-bg.png);
}



/*FIGURE OUT PROBLEM WITH MISSION STATEMENTS*/


body .mission-statements 
{

margin-left: 131px;

padding-bottom: 130px;
padding-left: 45px;
padding-right: 45px;
background-size: 100% 100%;
background-repeat: no-repeat; 
background-image:url(assets/img/Uploads/bg-trees.png);
}


body .mission-statements .why
{
padding-top: 40px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    padding-bottom: 40px;               
    padding-left: 40px;
    position: relative;
    left: -40px;
    top: 30px;
}


body .mission-statements .how
{
padding-top: 40px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 10px;
padding-right: 40px;
}

body .mission-statements .what
{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
    left: -40px;
    top: 30px;
}




body .mission-statements .why pre
{
padding-left: 40px;
}



body .mission-statements .how
{
	
	   margin-top: 0px !important;
    padding-right: 0px;
    margin-bottom: 0px !important;
}




/*.top .imgB1
{
  position: relative;
  top: -225px;
}

*/

.top 
{
  position: relative;
  top: 0;
  left: 0;
  margin-bottom:-7px;
}

.imgA1 
{
  position: relative;
  top: 0;
  left: 0;
 }
.clippedmain{
    position: absolute;
    top: 0;
    left: 0;
}
#clippedImg{
    position: absolute;
    top: 0;
    left: 0;
     z-index:2;
}

#clipimgA1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(1px 100%,131px 100%,130px 0px,0px 0px);
 position: absolute;
    top: 0;
    left: 0;
    z-index:2;
    opacity:0.5;
}

/*Firefox*/
clip-path: url("#clipPolygon");

/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat;
}

.imgB1 
{
  position: absolute;
  top: -65px;
  left: 70px;
}





.footer .footer-section1
{
  float: left;
  width: 33%;
}







.footer .footer-section2 .block-title
{
position: relative;

width: 338px;
left: -140px;
font-size: 16px !important;
font-family: "AvantGarde";
color: rgb(40, 40, 41);
    /* font-style: italic; */
letter-spacing: 4px;
border-bottom: 2px solid #000000;

}



.footer .footer-section2 .block-content
{
font-style: italic;
line-height: 1.52;
top: 18px;
left: 52px;
position: relative;
}




.footer .footer-section3 .block-content
{
  position: relative;
  line-height: 1.52;
  
  left: 12px;
  letter-spacing: 4px;
  top: 15px;
  font-style: italic;
}


.footer .footer-section3 .block-title
{
border-bottom: 2px solid #000000;
width: 60%;
left: 14px;

position: relative;
}



.footer .footer-section1 .block-content
{
    position: relative;
    line-height: 1.52;
    top: 67px;
    left: 125px;
  
    font-style: italic;


}





.footer .footer-section2
{
  position: relative;
  left: -89px;
}
.footer .footer-section2
{
  float: left;
  width: 33%;
}

.footer .footer-section3
{
  float: left;
  width: 33%;
}


.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 28px;
  left: 55%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.scroll-down:before {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 6px);
  transform: rotate(-45deg);
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid white;
  border-width: 0px 0 2px 2px;
}
section.ok {
  position:relative;
  top:2000px;
}


















.copy-rights

{
  font-size: 16px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  position: relative;
  top: 48px;
  display: block;
  font-size: 12px;
  text-align: center;
  color: rgb(40, 40, 41);
  font-style: italic;
  -moz-transform: matrix( 0.99963252426166,0,0,0.99882633931212,0,0);
  -webkit-transform: matrix( 0.99963252426166,0,0,0.99882633931212,0,0);
  -ms-transform: matrix( 0.99963252426166,0,0,0.99882633931212,0,0);
   font-style: normal;
}









#leftBar 
{
   
   background-color: #030303;


  box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25); 
  border-right: solid #EF7440;
  border-right-width: 4px;
  top: 0px;
  bottom: 0px;
  left: 0px;
     height: 2278px;
  position: absolute;
  width: 131px;  
    /*Commented today */
 /* opacity: 0.5;  */



}

/*

#holder {
  width: 700px;
   margin-left: 263px;
  padding-left: 50px;
  margin-top: 10px;
  height: 100%;
  float: right;
  position: fixed;

}

*/

@font-face {
  font-family: BEBAS;
  src: url("http://webdesigncove.com/fonts/BEBAS___.ttf")
}

h1.logo {
  font-size: 26px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1.2em;
  letter-spacing: -3px;
  color: white;
  text-align: center;
  padding-top: 10px;
}

h1.postTitle {
  font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
  }
  
p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: .28em;
  line-height: 1.45em;
}

#navigation {
  padding: 0;
  margin: 0;
  text-align: center;
  position: relative;
  z-index: 3;
}

#navigation li {
  list-style-type: none;
  margin-bottom: 5px;
}

#navigation a:link {
    font-family: "ITC Avant Garde Gothic";
 font-size: 15px;
font-style: normal;

}

#navigation a:visited {

   color: rgb(255, 255, 255);
}

#navigation a:hover {
  color: #FE5B1F;
}


.copy-right-text 
{
    font: Bold 12px 'Open Sans';
    color: #ffffff;
    padding-top: 10px;
    text-align: center;
}
<div class="top">
<img id="clipimgA1" class="clippedmain" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png" alt="img">
<img class="imgA1" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png">
</div>

<div id="leftBar"> 

<br />

<svg id="clippedImg" width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="1 100%,131 100%,130 0,0 0">
    </polygon>
  </clipPath>
</svg>    
<ul id="navigation">
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
<li><a href="#">Text4</a></li>
<li><i class="fa fa-facebook-square" style="float:left"></i></li>
<li><i class="fa fa-twitter-square" style="float:left"></i></li>
<li><i class="fa fa-instagram" style="float:left"></i></li>
</ul>
</div>

<div class="leftBar-bottom"> 

</div>

<!-- End Side bar div-->
<div class="company-bio">
<p align="center" style="font-family: Adelle PE">Hello World </p>
<p align="center" style="font-family: Adelle PE">Nice Text! </p>
<p align="center" >Hello David</p>
</div>

Upvotes: 1

mrsq
mrsq

Reputation: 235

Sure thing, it sounds like you want to use RGBA() to control the opacity, so you would make these updates:

#leftBar {
   background-color: rgba(3,3,3,.6);
}

and you have to get rid of the margin-left on .company-bio so it aligns underneath your nav.

See here:

https://jsfiddle.net/g2ahx6nq/9/

Upvotes: 0

Related Questions