Originele aanwijs effecten met CSS3

In deze oefening gebruik ik de http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ demonstraties en codes.

Drupal8_001588.png

De demo toont 10 mogelijkheden. maak je keuze...

Drupal8_001589.png

Na het downloaden van de code, kan je het effect lokaal op je computer reeds testen. De download heeft alles mee wat nodig is. HTML, CSS en de afbeeldingen.

Drupal8_001592.png

Het gaat hier om pure HTML/CSS script dat enkel werkt op een naakte pagina (PHP page). Je zou kunnen de code kopiëren en plakken en de links, afbeeldingen aanpassen. Natuurlijk kan dit, maar we moeten dan wel alles prijs geven van inhoudstypen en veldstructuur als we zo willen te werk gaan.

Ik vroeg me af hoe ik dit zou kunnen implementeren in een Drupal site. Wel ik heb een oplossing gevonden voor views.Voor de nodes ben ik nog op zoek..

Maak een inhoudstype 'foto' en vul het met enkel afbeeldingen (1 per node) Ik gebruik de afbeeldingen van de bronsite. Ze zijn mooi..

Drupal8_001593.png

Maak een view aan in onopgemaakte stijl en voeg het body veld en de lees meer optie, toe.

Drupal8_001594.png

De lees meer tekst vervangen we door een figuurtje.

Drupal8_001595.png

Veel mooier.
Drupal8_001596.png

Nu de CSS. Je kunt kiezen uit 10 opties. elk met hun indexpagina en eigen CSS. Kier er eentje van.

Drupal8_001597.png

Dit is mijn code (heb er natuurlijk al wat aan geprutst..)

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

nu moeten we nog de klassen toewijzen. Je doet dit bij de instellingen van onopgemaakte lijst.

Drupal8_001599.png

Ik gebruik deze volgorde. Maak dat alle velden verborgen staan behalve de laatste die we herschrijven.


Drupal8_001601.png

Herschrijf de body. Kijk aandachtig naar het voorbeeld van de download.

Drupal8_001605.png

Nu herschrijf je op dezelfde manier. Merk op dat in Drupal 8 de tokens een andere vorm hebben.

<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 krijgen nu iets zoals dit:

Drupal8_001603.png

Kijk naar de demo: http://demo.drupal8.support/en/hover-effects-demo

Als je 3D hoover effecten wilt...: http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

Opgelet.. probeer eerst in alle browsers.. Internet Explorer durft soms te falen..

Wij gaan een ander voorbeeld uitwerken... De afbeelding draait ogenschijnlijk om.  Op http://css3.bradshawenterprises.com/flip/ vind je alles.. pas toe wat je net hebt geleerd...

Demo Card Flip: http://demo.drupal8.support/en/image-flip

trefwoorden