Original Hover effects with CSS3

In this tutorial i thankfully use the http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ demonstrations and codes.


The demo show 10 excellent hover effects on images. Try out yourself.


After downloading the code the effects already work in your local computer. Look at the URL. The folder contains a index page that has the images, CSS and HTML.


As it is a pure HTML/CSS it works, but not in Drupal. Drupal has its own structure of course. you could implement this code in a content type using the PHP text mode. Ther you could copy paste the code and check the links that they are referring to th correct adresses. But you still would have a naked HTML/CSS page, and not a Drupal page.

I asked myself how could i use this extraordinery effect in my Drupal site. Well... views has a rewritable mode...that allows us to implement these effects into our Drupal views.

Make a content type 'photo' and fill it with the images delivered by the download. They are pretty so..


Now create a view with thes images of the content type 'photo'

Add the body field and the link to the content.


The view more text i want to replace by an image:


So much prettier...

Now the CSS. The download has a CSS file for the 10 kinds of demos. Now you have to make a choise. We choose a style.


This is the CSS code...


.view {
    /*width: 300px;*/
    height: 200px;
    /*margin: 10px;*/
    margin: 10px 5px 10px 5px;
    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, .view .content {
    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;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
.view a.info:hover {
    box-shadow: 0 0 5px #000

.view-first img {
    transition: all 0.2s linear;
    margin:0 auto;
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
    background: rgba(0, 0, 0, 0.5);
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;

.view-first:hover img {
    transform: scale(1.1);
.view-first:hover .mask {
    opacity: 1;
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
.view-first:hover p {
    transition-delay: 0.1s;
.view-first:hover a.info {
    transition-delay: 0.2s;

Now we have to assign the classes into the structure. First the default class... in configurations


Then you have to make this order. The last one will be rewritten. Hide the others.


Rewrite the body. If you have a look at the indexpage you downloaded, you could see the classes and their assingment.


Soo we have to configure it the same way.

<div class="view first-view">  
  <div>{{ field_image }}</div>
     <div class="mask">  
     {{ body }}<div style="text-align:center;">{{ view_node }}</div>

We have now something like that..


Look at the live demo:


You als have 3D hover effects: http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

Try out in all browsers... Internet Explorer fails sometimes..

The next example is a card flip image. On http://css3.bradshawenterprises.com/flip/

you find the code and CSS. Just apply like you've learned..

live demo:



Used modules