Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Show background transition effect on hover

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 88
    Comment on it

    If you want to change width and height to the box and show the content after a transition on hover, below code will help you.

    We can easily use the transition property and change the width and height to the div, for this first we will create the content div and inside create the two div, the first div is for a title and the second div is for description. The transition property defines your timing function, first we will fix the height and width in content div and then on hover width and height will change.

    below code shows that when we take mouse on the div, the width and height will not immediately change it will change smoothly and the second div wait for 1 second before the transition effect starts.

    HTML:

    <div class="content">//content div
        <div class="one">//first div
         <h1>Who I am</h1>
        </div>
        <div class="two">//second div 
            <p>I'm human being, I want some one two love me, i want some one to need me </p>
        </div>
      </div>

    CSS:

    * {
          color: #fff;  //change background color content div 
        }
        .content{
          width: 150px;
          height: 200px;
          position: relative;
          opacity: 0.8; //describes the transparency-level a div
          margin: auto;
           -webkit-transition: width 1s, height 1s; //change the width and height with a smooth transition        effect off hover: used for chrome 
          transition: width 1s, height 1s; //used for firefox 
        }
        .content:hover{
          width: 200px;
          height: 300px;
          -webkit-transition: width 1s, height 1s; //change the width and height with a smooth transition effect on hover : used for chrome 
          transition: width 1s, height 1s;  //used for firefox 
        }
        .content:hover .two{
          opacity: 1;
          transition-delay: 1s; //Wait 1 seconds before the transition effect starts:
        }
        .content .one,.content .two{
          position: absolute;
          background: #000;
          width: 100%;
          height: 100%;
          display: table;
        }
        .content .two{
          transition: opacity 1s ease-in-out; //Specifies a transition effect with a slow start and end 
          opacity: 0;
        }
      .content .one h1,
      .content .two p{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }

    I have attached the full code packet at the bottom:

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: