Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 Hover effect

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 264
    Comment on it

    CSS3 Hover effect makes possible several changes to the single elements by adding many features to it, for example It includes feature like transition, transform and animation. That will add new effect to the simple div. The :hover selector is used to select elements when a user mouse over them in order to have good effects. Here in this blog a simple use of hover is explained in a beautiful manner. Hope readers will like this hover effect! 


     Html Source Code:-

    <!DOCTYPE html>  
      <html>  
       <head>  
         <title>CSS3 Hover Effect</title>  
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <link href='http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'>
      </head>
    <h1 style="font-family: 'Raleway', sans-serif;"> CSS3 hover<span id="hover"> effects/</span></h1>
    <p style="font-family: sans-serif; color: #fff; padding-left: 10px;">Through CSS everything is possible.</p>
        <div class="view view-tenth">
          <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb0cb09f95f41391ea85/1459874573710/j07SfQZ.png" />
          <div class="mask">
            <h2>The Only Living Boy in New York</h2>
            <p>Words and such, a whole lot more of muh flippin' words.</p>
            <a href="#" class="info">Read More</a>
          </div>
        </div>
    
    </body>
    </html>
    

    CSS Source Code:-

    html {
      min-height: 100%;
    }
    
    body {
      background: radial-gradient(ellipse at bottom left, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25), rgba(42, 60, 87, 0.4)), linear-gradient(135deg, #670d10, #092756);
    }
    
    h1 {
      color: white;
      padding-left: 10px;
    }
    
    #hover {
      color: rgba(188, 175, 204, 0.9);
    }
    .view {
      margin: 10px;
      float: left;
      border: 10px solid #fff;
      overflow: hidden;
      position: relative;
      text-align: center;
      box-shadow: 1px 1px 2px #e6e6e6;
      cursor: default;
      background: #fff url(../images/bgimg.jpg) no-repeat center center
    }
    
    .view .mask {
      width: 300px;
      height: 200px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0
    }
    
    .view img {
      display: block;
      position: relative
    }
    
    .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 17px;
      font-family: Raleway, serif;
      padding: 10px;
      /*background: rgba(0, 0, 0, 0.8);*/
      margin: 20px 0 0 0
    }
    
    .view p {
      font-family: Merriweather, serif;
      font-style: italic;
      font-size: 14px;
      position: relative;
      color: #fff;
      padding: 0px 20px 0px;
      text-align: center
    }
    
    .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 14px;
      background: #000;
      color: #fff;
      font-family: Raleway, serif;
      text-transform: uppercase;
      box-shadow: 0 0 1px #000
    }
    
    .view a.info:hover {
      box-shadow: 0 0 5px #000
    }
    .view-tenth img {
      transform: scaleY(1);
      transition: all .7s ease-in-out;
    }
    
    .view-tenth .mask {
      background-color: rgba(255, 231, 179, 0.3);
      transition: all 0.5s linear;
      opacity: 0;
    }
    
    .view-tenth h2 {
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      background: transparent;
      margin: 20px 40px 0px 40px;
      transform: scale(0);
      color: #333;
      transition: all 0.5s linear;
      opacity: 0;
    }
    
    .view-tenth p {
      color: #333;
      opacity: 0;
      transform: scale(0);
      transition: all 0.5s linear;
      padding-
    }
    
    .view-tenth a.info {
      opacity: 0;
      transform: scale(0);
      transition: all 0.5s linear;
    }
    
    .view-tenth:hover img {
      -webkit-transform: scale(10);
      transform: scale(10);
      opacity: 0;
    }
    
    .view-tenth:hover .mask {
      opacity: 1;
    }
    
    .view-tenth:hover h2,
    .view-tenth:hover p,
    .view-tenth:hover a.info {
      transform: scale(1);
      opacity: 1;
    }
    

     

 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: