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'.
<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 -->
|
Modal
A modal or dialog box drop down takeover. On click or tap the users screen is temporarily obstructed by a modal box animated in from the top of the page. The modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are used to command user attention to vital pieces of information and to display emergency states.
Click Here For Modal
<!-- modal starts -->
<div id="myModal" class="modal hide fade" tabindex="-1" data-width="760" style="display:none;">
<!-- modal header container starts-->
<div class="m-pdp-modal-header modal-header">
<!--modal header title starts -->
<h5 class="m-pdp-modal-header-text">Modal Header
<span><a href="#" data-dismiss="modal" class="pull-right icon-close icon-close-modal"></a></span>
</h5>
<!--modal header title ends -->
</div>
<!-- end modal header container -->
<!-- form starts -->
<form>
<div class="modal-body">
<p>Modal description copy</p>
<br>
<label>INPUT</label>
<input style="width:250px;" data-type="email" type="email"/>
</div>
<!-- modal footer container starts -->
<div class="modal-footer pdp-modal-footer">
<!-- modal go back to shopping link -->
<input type="submit" class="btn btn-submit pull-left" value="Submit">
</div>
<!-- end modal footer container -->
</form>
<!-- form ends -->
</div>
<!-- modal 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.
-
Title
-
Title
-
Title
-
Title
-
Title
-
Title
-
Title
-
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 -->
|