Hover States

Teleflora site animations for hover states on desktop or touch events on tablet/mobile.

The first hover state appears on product detail pages and is used as a zoom indicator. This hover state is only available on desktop and does not have an equivalent on tablet or mobile.

The second animation is a hover state that is used on the product landing pages. The hover displays an overlapping button that when clicked initiates a drop down product preview. This hover state is only available on desktop and does not have an equivalent on tablet or mobile.

The third hover state is a tooltip that is used to provide additional information about a specific element. This hover state becomes a tap on tablet and mobile.

The fourth hover state is a parallax effect. On hover the element in focus increases in size while the other elements in the container decrease. This hover state is bound to the class of 'm-featured-collection-parallax'.

Image
  <div class="m-pdp-main-img-container hide-on-smaller-than-tablet">
    <img class="m-pdp-main-img" src="http://placehold.it/200x300" alt="Image">
  </div>
            
  <div class="m-product-mini-image">
    <a href="#" class="btn btn-light btn-quickview no-mobile">Quick view</a>
    <a href="#">
      <figure>
        <img src="http://placehold.it/160x200" alt="About the image">
      </figure>
    </a>
  </div>
            
  <!-- collection starts -->
  <div id="mothersCollection" class="m-featured-collection-parallax top-margin d-container_12 clearfix">
    <!-- products container starts -->
    <div class="m-featured-dock clearfix">
      <!-- first container starts -->
      <div class="m-product-mini" data-order="1">
        <a href="#">
          <figure class="fluid">
            <img src="http://placehold.it/272x340" alt="image">
         </figure>
       </a>
       <a href="#" class="m-product-mini-price">$00.00</a>
       <a href="#" class="m-product-mini-buynow">Copy</a>
     </div>
     <!-- first container ends -->
   </div>
   <!-- products container ends -->
 </div>
 <!-- collection ends -->
            

Toggle Animations

Click or tap toggle animations. Toggle animations are animations that toggle (add or remove) a class of 'active', to display or hide their full contents.

Section Header

Individual Section Title

Suspendisse sed facilisis massa, et ultricies justo. Morbi viverra ultrices orci, vehicula dapibus arcu egestas sit amet. Sed ut sapien leo. Nunc eu tellus sagittis, sollicitudin quam vel, aliquam nunc. In dapibus id dui eget fringilla. Nullam laoreet eu elit vitae lacinia. Nam non consequat nulla, sed dictum nisl. Fusce eleifend quam quis bibendum sodales. Maecenas leo metus, pellentesque quis velit vel, gravida lobortis lectus.

Individual Section Title

Suspendisse sed facilisis massa, et ultricies justo. Morbi viverra ultrices orci, vehicula dapibus arcu egestas sit amet. Sed ut sapien leo. Nunc eu tellus sagittis, sollicitudin quam vel, aliquam nunc. In dapibus id dui eget fringilla. Nullam laoreet eu elit vitae lacinia. Nam non consequat nulla, sed dictum nisl. Fusce eleifend quam quis bibendum sodales. Maecenas leo metus, pellentesque quis velit vel, gravida lobortis lectus.

Individual Section Title

Suspendisse sed facilisis massa, et ultricies justo. Morbi viverra ultrices orci, vehicula dapibus arcu egestas sit amet. Sed ut sapien leo. Nunc eu tellus sagittis, sollicitudin quam vel, aliquam nunc. In dapibus id dui eget fringilla. Nullam laoreet eu elit vitae lacinia. Nam non consequat nulla, sed dictum nisl. Fusce eleifend quam quis bibendum sodales. Maecenas leo metus, pellentesque quis velit vel, gravida lobortis lectus.

  <!-- toggle section starts -->
  <div class="m-faq-section" id="deliveryInfo">
    <h3 class="m-faq-section-header bembo-bold">Section Header</h3>
    <!-- toggle container starts -->
    <div class="m-faq-items">
      <!-- FAQ item starts -->
      <div class="m-faq-item">
        <a class="m-faq-toggle" href="#collapse1" data-parent="#deliveryInfo">
          <h5 class="m-faq-item-header">
           Individual Section Title
         </h5>
       </a>
       <p class="m-faq-item-content" data-id="#collapse1">
         Suspendisse sed facilisis massa, et ultricies justo. Morbi viverra ultrices orci, vehicula dapibus arcu egestas sit amet. Sed ut sapien leo. Nunc eu tellus sagittis, sollicitudin quam vel, aliquam nunc. In dapibus id dui eget fringilla. Nullam laoreet eu elit vitae lacinia. Nam non consequat nulla, sed dictum nisl. Fusce eleifend quam quis bibendum sodales. Maecenas leo metus, pellentesque quis velit vel, gravida lobortis lectus.
       </p>
     </div>
     <!-- FAQ item ends -->
   </div>
   <!-- toggle container ends -->
 </div>
 <!-- toggle section ends -->
            

Carousels

These carousels appear throughout the Teleflora site. Carousels must be initialized by calling the associated function that is flexslider(). For more information on the Teleflora's flexsilders review the documentation at WooThemes.

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  • bouquet flower image

    Title

  <!-- carousel section starts -->
  <div class="m-pdp-flowers-in-bouquet">
    <!-- wrapper starts -->
    <div class="l-content-pdp-flowers l-wrapper">

      <!-- flexslider container starts-->
      <div class="grid_4 d-grid_12 m-pdp-flowers-in-bouquet-flex-container">
        <!-- tool-tip -->
        <div id="pdpTooltip" class="m-pdp-tooltip no-mobile"></div>
       <!-- flexslider starts -->
       <div id="pdp-flowers-caro" class="flexslider m-pdp-flowers-flexslider">
         <!-- flexslider slides list starts -->
         <ul id="flowersInBouquet" class="slides">
           <!-- object container starts -->
           <li>
             <!-- flower in bouquet container starts -->
             <div class="m-pdp-flowers-in-bouquet-flower">
               <!-- image -->
               <img src="http://placehold.it/140x130" data-copy="With their elegant form and unforgettable fragrance, xxx burst with clusters of petite blossoms.." alt="bouquet flower image"/>
               <!-- title tag -->
               <p class="m-pdp-flowers-in-bouquet-flower-tag" data-name="Title">Title</p>
             </div>
             <!-- flower in bouquet ends -->
           </li>
           <!-- object container ends -->
         </ul>
         <!-- flexslider slides list ends -->
       </div>
       <!-- flexslider ends -->
     </div>
     <!-- flexslider container  ends-->

   </div>
   <!--  wrapper ends -->
 </div>
 <!-- carousel section ends -->
            
  <!-- layout container starts -->
  <div class="m-category-bestsellers-pics d-grid_12">
    <!-- flexslider container starts -->
    <div id="bestsellersCaro">
      <!-- flexslider list element starts -->
      <ul class="slides m-category-bestsellers">
        <li>
          <div class="m-product-mini">
            <a href="#">
             <figure class="fluid">
               <img alt="title" src="http://placehold.it/220x275" />
             </figure>
           </a>
           <a href="#" class="m-category-flower-link centered">Description copy #1
           </a>
           <a href="#" class="m-product-price">$00.00</a>
         </div>
       </li>
     </ul>
     <!-- flexslider list element ends -->
   </div>
   <!-- flexslider container ends -->
 </div>
 <!-- layout container end -->