Image Thumb Gallery Showcase with CSS3 Transition Effect on Hover

Hello friends, This is our New year Gift to all.. This is our First post in New Year 2013. We wish you all a very Happy New Year… In this Tutorial, we will teach you to use the latest CSS3 Technology in a different way that your friend will say WOW !!. This is a Thumb image gallery Showcase with CSS3 Transitions/Animations on Hover. This will work on all major Browsers and we have also done a fallback for older vrowsers like IE. So let’s amaze your clients/Customers with the beautiful CSS3 effect. Let’s Start the Tutorial.

The HTML

Simply open an HTML page and Write the following HTML in tag.

Here, container is the Containing div of our gallery, then

,
• . Inside we will put the tag and the description that should come out when Hover.

  The CSS

  Attach a Styleshhet o the HTML and write the Following CSS to Start Animating.

  #container {
      margin:50px auto;
      width:1000px;
  }

  .showcase {
      list-style: none;
      padding: 0 0 40px 40px;
      height: 244px;
  }
  .showcase li {
      float: left;
      width: 285px;
      height: 244px;
      overflow: hidden;
      margin: 0 13px 0 0;
  }
  .showcase a {
      display: block;
      width: 285px;
      height: 244px;
      overflow: hidden;
      position: relative;
      text-decoration: none;
  }
  .showcase a img {
      width: 500px;
      height: 374px;
      margin: 0 auto;
      position: absolute;
      left: -104px;
      top: -40px;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
  }
  .showcase a:hover img {
      width: 285px;
      height: 213px;
      left: 0;
      top: -10px;
  }
  .showcase a p {
      background: #59A214;
      color: #fff;
      font-size: 11px;
      padding: 12px 20px;
      position:absolute;
      bottom:-100px;
      line-height: 20px;
      display: block;
      width: 245px;
      cursor: pointer;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
  }
  .showcase a:hover p {
      bottom: 0;
      background: #3C840B;
  }
  .showcase a h3 {
      font-size: 13px;
      text-transform: uppercase;
      color: #fff;
      background: #59A214;
      width: 211px;
      padding: 8px 10px;
      position: absolute;
      left:10px;
      bottom:10px;
      cursor: pointer;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
  }
  .showcase a:hover h3 {
      bottom:94px;
      background: #3C840B;
  }
  .showcase a h3 i {
      width: 33px;
      height: 26px;
      position: absolute;
      right: -34px;
      top: 0;
      background: #59A214;
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out;
      font-size:18px;
      font-weight:normal;
      text-align:center;
      padding:6px 0 0 0;
  }
  .showcase .thumb2 a p, .showcase .thumb2 a h3 {
      background: #F68B28;
  }
  .showcase .thumb2 a:hover p, .showcase .thumb2 a:hover h3 {
      background: #F16B17;
  }
  .showcase .thumb2 a h3 i {
      background: #F68B28;
  }
  .showcase .thumb2 a:hover h3 i {
      background: #F16B17;
  }
  .showcase .thumb3 a p, .showcase .thumb3 a h3 {
      background: #0065BB;
  }
  .showcase .thumb3 a:hover p, .showcase .thumb3 a:hover h3 {
      background: #0046A2;
  }
  .showcase .thumb3 a h3 i {
      background: #0065BB;
  }
  .showcase .thumb3 a:hover h3 i {
      background: #0046A2;
  }

  Here, we are putting transition for image and decreasing the size on :hover. like that we are also changing the position of

  and

  on :hover. For styling, we had choosen random colors for each thumb.

  That’s it. you are done. Now run your code in a Browser, you will get amazed. We have also provided a Demo below and Full Source code for Reference. Please let me know if you have any doubt in this tutorial or any comments, Suggestions to us.

  

  affiliate marketing