Shape Open To Reveal Text

md.shakil hossain

1166

 <div class="iconDiv">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="278px" height="341px" viewBox="0 0 278 341" version="1.1">
  <defs/>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Desktop-HD" sketch:type="MSArtboardGroup" transform="translate(-650.000000, -946.000000)">
      <g id="Open-coffee" sketch:type="MSLayerGroup" transform="translate(650.000000, 946.000000)">
        <text class="text" id="Wheelys" sketch:type="MSTextLayer" font-family="Avenir" font-size="25" font-weight="420" fill="#454040">
          <tspan x="87.4832041" y="180.292025">
            ГУБКИ☺
          </tspan>
        </text>
        <path class="L_oval" d="M0.359173127 173.233313C0.359173127 264.096891 124.633075 359.438872 124.633075 337.756376L124.633075 8.71025018C124.633075-30.4723099 0.359173127 82.3697344 0.359173127 173.233313Z" id="Oval-16" fill="#62463B" sketch:type="MSShapeGroup"/>
        <path class="R_oval" d="M278 173.189579C278 82.3260001 153.726098-33.1684737 153.726098 9.29785604L153.726098 337.712641C153.726098 359.578176 278 264.053157 278 173.189579L278 173.189579Z" id="Oval-16-Copy" fill="#62463B" sketch:type="MSShapeGroup"/>
      </g>
    </g>
  </g>
</svg>
</div>

Try it Yourself >>

 .icon{
  width:100%;
  margin-top:20%;
}

.iconDiv{
  text-align:center;
}

.icon .L_oval{
  -webkit-transition: 0.5s ease-in;
	transition: 0.5s ease-in;
   -webkit-transform:translate(10px,0);
	transform:translate(5px,0);
}

.icon:hover .L_oval{
  -webkit-transform:translate(-70px,0);
	transform:translate(-70px,0);
}

.icon .R_oval{
  -webkit-transition: 0.5s ease-in;
	transition: 0.5s ease-in;
  transform:translate(-5px,0);
}

.icon:hover .R_oval{
  -webkit-transform:translate(70px,0);
	transform:translate(70px,0);
}

.icon .text{
  -webkit-transition:all 0.7s ease-in-out;
  transition:all 0.7s ease-in-out;
  fill:white;
}

.icon:hover .text{
  fill:black;
}

Try it Yourself >>