March 1, 2015

3D image hover effect with shadow

3D image hover effect with shadow

A simple CSS3 3D experiment showing the conversion of an image into a realistic 3D cuboid on hover with a cool shadow effect.

The bottom surface of the cuboid is made using a pseudo element which inherits the background image of the thumbnail and is positioned perpendicularly to create the 3D box effect.

The second pseudo element uses a translucent background and box-shadow to create a blurred dark shadow for the cuboid. Though CSS blur filter provides better control and visuals for the shadow, we stick to box-shadow because of the lack of support for CSS filters in many browsers.

HTML

<div class="thumb">
    <a href="http://www.thelittletechie.com/">
        <span>Tomb Rider</span>
    </a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat);

* {margin: 0; padding: 0;}

.thumb {
 width: 400px; 
  height: 300px; 
  margin: 0 auto;
 perspective: 1000px;
}

.thumb a {
 display: block; 
  width: 100%; 
  height: 100%;
 background: 
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
  url("http://page-featured-1.gamewise.co/Tomb-Raider-Definitive-Edition-Leaked-on-Spike-TV-Site-268435-large.jpeg");
/*Image Source: http://gamewise.co/brainwaves/5586/Tomb-Raider-Definitive-Edition-Leaked-on-Spike-TV-Site*/
 background-size: 0, cover;
 transform-style: preserve-3d;
 transition: all 0.5s;
}

.thumb:hover a {
  transform: rotateX(80deg); 
  transform-origin: bottom;
}

.thumb a:after {
 content: ''; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
 width: 100%; 
  height: 36px;
 background: inherit; 
  background-size: cover, cover;
 background-position: bottom;
 transform: rotateX(90deg); 
  transform-origin: bottom;
}

.thumb a span {
 color: white; 
  text-transform: uppercase;
 position: absolute; 
  top: 100%; 
  left: 0; 
  width: 100%;
 font: bold 12px/36px Montserrat; 
  text-align: center;
 transform: rotateX(-89.99deg); 
  transform-origin: top;
 z-index: 1;
}

.thumb a:before {
 content: ''; 
  position: absolute; 
  top: 0; 
  left: 0;
 width: 100%; 
  height: 100%;
 background: rgba(0, 0, 0, 0.5); 
 box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
 transition: all 0.5s; 
 opacity: 0.15;
 transform: rotateX(95deg) translateZ(-80px) scale(0.75);
 transform-origin: bottom;
}

.thumb:hover a:before {
 opacity: 1;
 box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
 transform: rotateX(0) translateZ(-60px) scale(0.85);
}

Note:

Does not work in mobile.

demo

No comments:

Post a Comment

Popular Posts

Views