Adding a Tilt Effect to your Images on Hover with CSS

Adding interactivity to your website is always a value add. Static images are boring yet for some reason they’re still everywhere on the web. Good design principles include adding as much interactivity to your images as possible so they stand out. There are many ways to do this using different hover effects with JavaScript. However, in this article, we will show you how to add a tilt effect to your images on Hover using CSS.

Below is the HTML, CSS, and JavaScript required.

Step 1 — tilted-image.html

Copy and paste the code below into your web page

<div class="container sectional-wrapper" >
   <div class="row" >
      <div class="col-md-12" >
         <!-- sample.html -->
         <div class="dynamicDiv" id="dd.0.2.0" >
            <div class="row" >
               <div class="col-md-12 pagingBorder" >
                  <div id="theImageGrid" >
                     <ul class="row imagegrid" id="imagegrid" >
                        <li class="col-xs-12 col-sm-6 col-md-4" id="167" >
                           <div class="imgHolder" >
                              <div class="fauxCrop" >
                                 <a href="#" ><img src="https://www.solodev.com/assets/fancy/travel3.jpg" class="grid-image img-responsive" ></a>
                              </div>
                             
                           </div>
                         
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4" id="27" >
                           <div class="imgHolder" >
                              <div class="fauxCrop" >
                                 <a href="#" ><img src="https://www.solodev.com/assets/fancy/travel2.jpg" class="grid-image img-responsive" ></a>
                              </div>
                              
                           </div>
                           <div class="clearfix" ></div>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4" id="23" >
                           <div class="imgHolder" >
                              <div class="fauxCrop" >
                                 <a href="#" ><img src="https://www.solodev.com/assets/fancy/travel4.jpg" class="grid-image img-responsive" ></a>
                              </div>
                             
                           </div>
                           <div class="clearfix" ></div>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4" id="22" >
                           <div class="imgHolder" >
                              <div class="fauxCrop" >
                                 <a href="#" ><img src="https://www.solodev.com/assets/fancy/travel5.jpg" class="grid-image img-responsive" ></a>
                              </div>
                              
                           </div>
                           <div class="clearfix" ></div>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4" id="105" >
                           <div class="imgHolder" >
                              <div class="fauxCrop" >
                                 <a href="#" ><img src="https://www.solodev.com/assets/fancy/travel6.jpg" class="grid-image img-responsive" ></a>
                              </div>
                             
                           </div>
                           <div class="clearfix" ></div>
                        </li>
                        <li class="col-xs-12 col-sm-6 col-md-4" id="106" >
                           <div class="imgHolder" >
                              <div class="fauxCrop" >
                                 <a href="#" ><img src="https://www.solodev.com/assets/fancy/travel7.jpg" class="grid-image img-responsive" ></a>
                              </div>
                              
                           </div>
                           <div class="clearfix" ></div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <!-- end sample -->
      </div>
   </div>
</div>

Step 2 — tilted-image.css

Download the CSS below and include it in your web page

tilted-image.css

Step 3 — Include the following resources in your web page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylehseet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylehseet" href="tilted-image.css">

In this article, Solodev showed how to add a tilt effect to your images on Hover using CSS. Now you can take that same functionality and apply it to your website.

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.