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.

Drupal8_001588.png

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

Drupal8_001589.png

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.

Drupal8_001592.png

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..

Drupal8_001593.png

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

Add the body field and the link to the content.

Drupal8_001594.png

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

Drupal8_001595.png

So much prettier...
Drupal8_001596.png

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.

Drupal8_001597.png

This is the CSS code...

.links_uitlijnen{
display:block;
float:left;
}

.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;
}
.site-footer{
display:none;
}

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

Drupal8_001599.png

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

Drupal8_001601.png

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

Drupal8_001605.png

Soo we have to configure it the same way.

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

We have now something like that..

Drupal8_001603.png

Look at the live demo:

http://demo.drupal8.support/en/hover-effects-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:

http://demo.drupal8.support/en/image-flip

tags

Used modules