opacity and drawing comments with css

In this example below you will see how to do a opacity and drawing comments with css with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©
  • HTML
  • CSS
  • JavaScript
    <section class="one">
  <div class="content">
  <div class="big_org_container">
    <div class="big_org_content">

      <span>Be inspired</span><br>
      Thought provoking<br>
      and productive

    </div>
    <div class="big_org_rec"></div>
    <div class="big_org_triangle"></div>
  
  <div class="wht_container">
    <div class="wht_content">

      <span>Be inspired</span><br>
      Thought provoking<br>
      and productive

    </div>
    <div class="wht_rec"></div>
    <div class="wht_triangle"></div>
  </div>
</div>


<div class="navy_container">
  <div class="big_navy_content">

    <span>Be inspired</span><br>
    Thought provoking<br>
    and productive

  </div>
  <div class="big_navy_rec"></div>
  <div class="big_navy_triangle"></div>
</div>

<div class="sm_org_container">
  <div class="sm_org_content">

    <span>Be inspired</span><br>
    Thought provoking<br>
    and productive

  </div>
  <div class="sm_org_rec"></div>
  <div class="sm_org_triangle"></div>
  </div>

</section>
<section class="two">
   <div class="content">
  hey im 2
  </div>
  </section>

/*Downloaded from https://www.codeseek.co/mush_el/opacity-and-drawing-comments-with-css-zxEZJG */
    @orange: #DB5D26;
@navy: #1F3640;

body {
  margin: 0px;
}

section.one, section.two {
   height: 100vh;
  position: relative;
}
.content {
  display: none;
}
.one:before {
  background: #fff url('http://scotthessphoto.typepad.com/.a/6a010536e9cbb4970c01538eb32728970b-pi');
   z-index: -1;
	content: '';
	width: 100%;
	height: 100vh;
	position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
}
.opacity:before {
  opacity: .7;
  transition: opacity 2s 2s ease;
  -webkit-transition: opacity 2s 2s ease;
}

.two:before {
  background: #fff url('http://www.goodwp.com/images/201104/goodwp.com_17730.jpg');
    background-position: 100% center;
   z-index: -1;
	content: '';
	width: 100%;
	height: 100vh;
	position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;

}
.big_org_container {
  margin: 20px;
  display: inline-block;
}
.big_org_rec {
  width: 270px;
  height: 180px;
  border-radius: 24px;
  background: @orange;
  opacity: .7;
}

.big_org_triangle {
  width: 0px;
  height: 0px;
  border-left: 30px solid @orange;
  border-top: 30px solid @orange;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  margin: 0px 0px 0px 40px;
  opacity: .7;
}

.big_org_content {
  position: absolute;
  z-index: 2;
  padding: 40px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
}

.big_org_content span {
  font-size: 32px;
  text-transform: none;
}

.navy_container {
  margin: -100px 0px 0px 520px;
  display: inline-block;
}

.big_navy_rec {
  width: 270px;
  height: 180px;
  border-radius: 24px;
  background: @navy;
  opacity: .7;
}

.big_navy_triangle {
  width: 0px;
  height: 0px;
  border-left: 30px solid @navy;
  border-top: 30px solid @navy;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  margin: 0px 0px 0px 40px;
  opacity: .7;
}

.big_navy_content {
  position: absolute;
  z-index: 2;
  padding: 40px;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.big_navy_content span {
  font-size: 32px;
  text-transform: none;
}

.sm_org_container {
  margin: -50px 0px 0px 720px;
  display: inline-block;
}
.sm_org_rec {
  width: 220px;
  height: 140px;
  border-radius: 22px;
  background: @orange;
  opacity: .7;
}

.sm_org_triangle {
  width: 0px;
  height: 0px;
  border-left: 24px solid transparent;
  border-top: 24px solid @orange;
  border-right: 24px solid  @orange;
  border-bottom: 24px solid transparent;
  margin: 0px 0px 0px 140px;
  opacity: .7;
}

.sm_org_content {
  position: absolute;
  z-index: 2;
  padding: 40px;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
}

.sm_org_content span {
  font-size: 26px;
  text-transform: none;
}

.wht_container {
  margin: 0px 0px 0px 290px;
  display: inline-block;
}
.wht_rec {
  width: 330px;
  height: 210px;
  border-radius: 22px;
  background: #fff;
  opacity: .7;
}

.wht_triangle {
  width: 0px;
  height: 0px;
  border-left: 36px solid transparent;
  border-top: 36px solid #fff;
  border-right: 36px solid  #fff;
  border-bottom: 36px solid transparent;
  margin: 0px 0px 0px 200px;
  opacity: .7;
}

.wht_content {
  position: absolute;
  z-index: 2;
  padding: 40px;
  font-size: 22px;
  text-align: center;
  text-transform: uppercase;
}

.wht_content span {
  font-size: 46px;
  text-transform: none;
}


/*Downloaded from https://www.codeseek.co/mush_el/opacity-and-drawing-comments-with-css-zxEZJG */
    $(window).load(function(){
 //  $("section.one").delay(2000).animate({
 //   opacity: 0.7,
 // }, 1000 );
 // delay doesn't work
   

$("section.one").addClass("opacity");
  $('.content').delay(2000).fadeIn("slow");
});

Comments