Text fade in with SVG - HTML CSS SVG

HTML CSS examples for SVG:Text

  1. HOME
  2. HTML CSS
  3. SVG
  4. Text

Description

Text fade in with SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

svg{<!--  w  ww. j a va 2s . c  o  m-->
   background:url('http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg');
   background-size:cover;
   width:40vmin; height:auto;
   display:block;
}
h5 {
   height: 15px;
   width: 280px;
   padding: 10px;
   color: white;
   margin-top: -105px;
   font-size: 15px;
}
text {
   font-size:350px;
   transition:font-size .4s ease-out;
   font-weight:900;
   font-family:arial;
}
svg:hover text{
   transition:font-size .4s ease-in;
   font-size: 10px;
}
#overlay{
   opacity: 0;
}
svg:hover ~ #overlay {
   transition: opacity .7s ease-in;
   opacity: 1;
}


      </style> 
 </head> 
 <body> 
  <svg viewbox="0 0 50 50" width="50" height="50"> 
   <defs> 
    <mask id="mask" x="0" y="0" width="100" height="49"> 
     <rect x="0.5" y="0.5" width="49" height="49" fill="#fff" /> 
     <text x="18" text-anchor="middle" y="50" dy="0">
       test 
     </text> 
     <text x="23" id="ltrV" text-anchor="middle" y="50" dy="0">
       test
     </text> 
     <text x="28" text-anchor="middle" y="50" dy="0">
       test
     </text> 
     <text x="33" text-anchor="middle" y="50" dy="0">
       test
     </text> 
    </mask> 
   </defs> 
   <rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#C0C0C0" /> 
  </svg> 
  <div id="overlay"> 
   <h5> 
    <center>
      text 
    </center> </h5> 
  </div>  
 </body>
</html>

Related Tutorials