Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Image Overlay Hover Effects With CSS3 Transitions

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 178
    Comment on it

    In this blog i am explaining how to create a overlay effect in image with the help of css3 . Overlay effect on image  is an awesome approach to include some decent interactivity to your website.

    In image overlay effect when we take our cursor or make hover on the image a overlay or black background comes over the image with some text which show when we click on it , we can see additional information about the image.

    Below is the html code of image ovelay effect :-

    <div class="row boxing-category mrg-bt-30 boxing-cat-row-1">
                  <div class="col-md-6 col-sm-6">
                    <div class="boxing-img-1 boxing-bg">
                      <img src="img/category-img-new3.jpg" class="img-responsive">
                      <div class="floating-overlay">
                        <p class="heading text-center">Kick Boxing / Muay Thai</p>                  
                        <div class="overlay"></div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6 col-sm-6 ">
                    <div class="boxing-img-2 boxing-bg">
                      <img src="img/category-img-new2.jpg" class="img-responsive">
                      <div class="floating-overlay">
                        <p class="heading text-center">Jiu Jitsu</p>                  
                        <div class="overlay"></div>
                      </div>
                    </div>
                  </div>              
     </div>

    Below is the css code for image overlay effect :-

    .boxing-bg{
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    line-height: 30px;
    overflow: hidden;
    }
    .boxing-bg:hover .floating-overlay{
    bottom: 0px;
    }
    .boxing-category .floating-overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: -100%;
    left: 0; 
    -webkit-transition: bottom 500ms ease-out 0s; /* Safari */
     transition: bottom 500ms ease-out 0s;}
    .boxing-category .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0,0,0,0.5); 
    }
    .boxing-category .heading{
    position: absolute;
    top: 40%;
    left: 0px;color:#fff;
    z-index: 40;width: 100%;
    font-size: 16px
    }
    

    Working demo :- you can find  working demo by simply downloading the file which is attached to this blog.

 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: