cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!--
  Still needs some tweaking with the JS. Customized to suite. Add breakpoints where needed.
  Detects hover events in CSS using 'video' class injected by modernizr to detect for support.
-->
<div class="parent">
  <figure class="effeckt-caption" data-effeckt-type="cover-fade">
    <img src="http://th09.deviantart.net/fs22/300W/i/2008/168/0/3/Flight_of_the_Seagulls_by_valatdeviantart.jpg" width="300" height="400"alt="">

    <figcaption>
      <div class="effeckt-figcaption-wrap">

        <video preload="auto" controls loop width="300px" id="backface-video" height="400px" poster="http://video-js.zencoder.com/oceans-clip.jpg">
          <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
          <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
        </video>

      </div>
          <p>What an amazing animal right? Look at them go.</p>
    </figcaption>

  </figure>
</div>
            
          
!
            
              @import "compass/css3";

/**
 *
 *  1. Show a 300x400 image on a page.
 
 *  2. On rollover of this whole image block start playing a small video. Ideally this video too would be 300x400.

 *  3. Video should perhaps be 5 seconds long and just loop as long as your mouse is still hovering.

 *  4. When you hover off, the video goes away and the still image comes back. The key is seeing how seamless it is,
       does the video have problems loading, what browsers and devices will it work on, etc.
 *
 */


// ==========================================================================
// Variables
// ==========================================================================

$effeckt-caption-transition-duration: 500ms !default;


// ==========================================================================
// Styles
// ==========================================================================

/*
<figure class="effeckt-caption" data-effeckt-type="">
  <img src="" alt="">
  <figcaption>
    <div class="effeckt-figcaption-wrap"></div>
  </figcaption>
</figure>

*/

html {
  background: #114A8F;
}

.effeckt-caption {
  border: 4px solid #58B5FA;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  // Start Custom Styles
  height: 400px;
  margin: 0 auto;
  width: 300px;
  // End Custom Styles

  img {
    transition: $effeckt-caption-transition-duration;
  }

  figcaption {
    background-color: #000;
    color: #EFE;
    position: absolute;
    transition: $effeckt-caption-transition-duration;
    width: 100%;
  }


  // Effect 5: Cover Fade
  &[data-effeckt-type="cover-fade"] {
    .video & {
      figcaption {
        top: 0;
        left: 0;
        height: 100%;
        opacity: 0;
      }

      /*&:hover,
      &:active,*/
      &.active {
        figcaption {
          opacity: 1;
        }
      }

    }

    .no-video & {
      figcaption {
        display: none;
      }
    }
  }
}
            
          
!
            
              ;(function(window){

  var
    // Is Modernizr defined on the global scope
    Modernizr = typeof Modernizr !== "undefined" ? Modernizr : false,

    // whether or not is a touch device
    isTouchDevice = Modernizr ? Modernizr.touch : !!('ontouchstart' in window || 'onmsgesturechange' in window),

    // Are we expecting a touch or a click?
    buttonPressedEvent = ( isTouchDevice ) ? 'touchstart' : 'click',

    // List of all animation/transition properties
    // with its animationEnd/transitionEnd event
    animationEndEventNames = {
      'WebkitAnimation' : 'webkitAnimationEnd',
      'OAnimation' : 'oAnimationEnd',
      'msAnimation' : 'MSAnimationEnd',
      'animation' : 'animationend'
    },

    transitionEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'OTransition' : 'oTransitionEnd',
      'msTransition' : 'MSTransitionEnd',
      'transition' : 'transitionend'
    },

    Effeckt = function() {
      this.init();
    };

  // Current version.
  Effeckt.version = '0.0.1';

  // Initialization method
  Effeckt.prototype.init = function() {
    this.buttonPressedEvent = buttonPressedEvent;

    //event trigger after animation/transition end.
    this.transitionEndEventName = Modernizr ? transitionEndEventNames[Modernizr.prefixed('transition')] : getTransitionEndEventNames();
    this.animationEndEventName  = Modernizr ? animationEndEventNames[Modernizr.prefixed('animation')] : getAnimationEndEventNames();
    this.transitionAnimationEndEvent = this.animationEndEventName + ' ' + this.transitionEndEventName;
  };

  Effeckt.prototype.getViewportHeight = function() {

    var docElement = document.documentElement,
      client = docElement['clientHeight'],
      inner = window['innerHeight'];

    if( client < inner )
      return inner;
    else
      return client;
  };

  // Get all the properties for transition/animation end
  function getTransitionEndEventNames() {
    return _getEndEventNames( transitionEndEventNames );
  }

  function getAnimationEndEventNames() {
    return _getEndEventNames( animationEndEventNames );
  }

  function _getEndEventNames(obj) {
    var events = [];

    for ( var eventName in obj ) {
      events.push( obj[ eventName ] );
    }

    return events.join(' ');
  }

  // Creates a Effeckt object.
  window.Effeckt = new Effeckt();

})(this);


/*!
 * captions.js
 *
 * author: Effeckt.css
 *
 * Licensed under the MIT license
 */

var effecktCaptions = {

  init: function() {
    this.bindUIActions();
  },

  bindUIActions: function() {
    var self = this,
        v = document.getElementsByTagName("video")[0];

    $('[data-effeckt-type]').on('click mouseover mouseout touchstart', function(event) {
      self.activateCaptions(this);

      event.preventDefault();
      console.log(event.type);

      if(this.classList.contains('active')) {
        v.play();
      } else {
        v.pause();
      }
    });
  },

  activateCaptions: function(el) {
    var activeClass = 'active';

    if (document.documentElement.classList) {
      el.classList.toggle(activeClass);
    } else {
      var $caption = $(el);
      $caption.toggleClass(activeClass);
    }
  }
};

effecktCaptions.init();
            
          
!
999px
Loading ..................

Console