JSFiddle

  • Bootstrap carousel fade caption on side #16 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

      $('.carousel').carousel();
  • Adjust height using js

    No-Library (pure JS), HTML, CSS, JavaScript

    /* Thanks to CSS Tricks for pointing out this bit of jQuery
    http://css-tricks.com/equal-height-blocks-in-rows/
    It's been modified into ...
  • Flip card effect ei 9 alternative

    No-Library (pure JS), HTML, CSS, JavaScript

     $(function() {
       $('.flip-container').hover(function(e) {
         // alert('hovered');
         var target = e.currentTarget,
           htmlClass = $('html').hasClass('no-csstransitions');
         if (htmlClass) {
           // alert(target);
           $(target ...
  • Flip card effect #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="card-container">
    
    
    
      <div class="one flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
          <div class="front">
            <div>
              <!-- front content -->
              <h3>Structural Heart <br />Disease</h3>
              <p>Ovitiam et landi que eicilitibus am, eum, eatius sunt fuga</p>
            </div>
          </div>
          <div class="back">
            <div>
              <!-- back content -->
              <h3>Back</h3>
              <p>hello</p>
            </div>
          </div>
        </div>
      </div>
    
    
    
      <div class="two flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
          <div class="front">
            <div>
              <!-- front content -->
              <h3>Peripheral Artery <br />Disease</h3>
              <p>Ovitiam et ...</p></!--></div></div></div></div></div>
  • Selector Code

    Select menu item to show content bootstrap

      $('.menu-selector a').click(function(event) {
        /* Act on the event */
        if ($('.data-postImg')) {
          // console.log('true');
          var postImage = $(this).attr('data-postImg');
          $('.PostImage ...
  • Selector Code with image

    Select menu item and show content and image

      $('.menu-selector a').click(function(event) {
        /* Act on the event */
        if ($('.data-postImg')) {
          var postImage = $(this).attr('data-postImg');
          $('.PostImage').attr('src', postImage);
        }
      });
    
  • Selector Code #2 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

      $('.menu-selector a').click(function(event) {
        /* Act on the event */
        if ($('.data-postImg')) {
          // console.log('true');
          var postImage = $(this).attr('data-postImg');
          $('.PostImage ...
  • Expanding box with transitions

    jQuery 1.11.0, HTML, SCSS, JavaScript

     /*Animation*/
     $('#arArrow,#arArrow2').click(function () {
         var classes = ['open', 'shrink'];
         $('#area').each(function () {
             this.className = classes[($.inArray(this.className, classes) + 1 ...
  • SGV hover Shape warp Effects #2 is the latest revision

    http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/

                 c(function () {
    
        function init() {
            var speed = 250,
                easing = mina.easeinout;
    
            [].slice.call(document.querySelectorAll('#grid > a')).forEach(function (el) {
                var ...
  • Hover Effects images/Captions etc #9 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="figure effect-1">
        <img src="http://lorempixel.com/400/200/animals/6" alt="img12" />
        <div class="figcaption">
            <div>
                 <h2>Effect 1 <span>Lily</span></h2>
    
                <p>Lily likes to play with crayons and pencils</p>
            </div> 
    
        </div>
    </div>
    <!-- EFFECT 2 -->
    <div class="figure effect-2">
        <img src="http://lorempixel.com/400/200/animals/6" alt="img12" />
        <div class="figcaption">
            <div>
                 <h2>Effect 2 <span>Sadie</span></h2>
    
                <p>Sadie likes to play with crayons ...</p></div></div></div></!-->