ไม่มีสินค้าในตระกร้า

รายละเอียด: เขียนโดย Super User; สร้างเมื่อ: 27 เมษายน 2563

profile slide

Container for rent

รายละเอียด: เขียนโดย Super User; สร้างเมื่อ: 23 มิถุนายน 2562

CSS3 animated hover effects for images

This code allows you to display an image and its description with animated CSS3 effect.
Note: If you would like to add your own text into the image description, just modify the code below or edit an existing code in the custom module of the demo template.

Example 1

<div class="dj-image-hover">
<div class="view view-third">
<img src="/images/modules/delivery.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>

Title

Lorem ipsum.

Example 2

<div class="dj-image-hover">
<div class="view view-fifth">
<img src="/images/modules/guarantee.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>

Title

Lorem ipsum.

Example 3

<div class="dj-image-hover">
<div class="view view-eighth">
<img src="/images/modules/refund.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>

Title

Lorem ipsum.

Example 4

<div class="dj-image-hover">
<div class="view view-tenth">
<img src="/images/modules/support.png" />
<div class="mask">
<h2>Title</h2>
<p>Lorem ipsum.</p>
<a class="readmore" href="#">Read More</a></div>
</div>
</div>

Title

Lorem ipsum.

Example 5

<div class="jm-animated-image">
<img class="border_img2" src="/images/modules/bottom2/boy.jpg" alt="Promotion" />
<div class="jm-mask-1"> </div>
<div class="jm-mask-2"> </div>
<div class="jm-mask">
<div>
<div>
<div>
<h3><a href="#">Top Stuff</a></h3>
<span class="jm-description">OFFER VALID UNTIL MARCH 20TH</span>
<span class="jm-price">$28</span>
<a class="jm-checkit" href="#">CHECK IT OUT!</a>
</div>
</div>
</div>
</div>
</div>

Top Stuff

OFFER VALID UNTIL MARCH 20TH $28 CHECK IT OUT!

Image Borders

Headings

This is Heading One (h1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris convallis porta lacinia bibendum felis.

This is Heading Two (h2)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)

This is Heading Six (h6)

Numered blocks

01Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

02Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

03Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

aLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

bLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

cLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra leo sed turpis convallis sit amet condimentum diam vehicula. Morbi suscipit nisl odio, nec sodales tellus. Aenean quis sapien suscipit mauris.

Colored blocks

this is a paragraph with the class "blue"
<p class="blue" > Text goes here</p>

this is a paragraph with the class "green"
<p class="green" > Text goes here</p>

this is a paragraph with the class "red"
<p class="red" > Text goes here</p>

this is a paragraph with the class "bluefill"
<p class="bluefill" > Text goes here</p>

this is a paragraph with the class "greenfill"
<p class="greenfill" > Text goes here</p>

this is a paragraph with the class "redfill"
<p class="redfill" > Text goes here</p>

Quote blocks

this is a paragraph with the class "quote-left"
<p class="quote-left" > Text goes here</p>

this is a paragraph with the class "quote-right"
<p class="quote-right" > Text goes here</p>

Icon blocks

this is a paragraph with the class "jmbadge"
<p class="jmbadge" > Text goes here</p>

this is a paragraph with the class "jmcalendar"
<p class="jmcalendar" > Text goes here</p>

this is a paragraph with the class "jmchat"
<p class="jmchat" > Text goes here</p>

this is a paragraph with the class "jmcheck"
<p class="jmcheck" > Text goes here</p>

this is a paragraph with the class "jmcloud"
<p class="jmcloud" > Text goes here</p>

this is a paragraph with the class "jmdirection"
<p class="jmdirection" > Text goes here</p>

this is a paragraph with the class "jmdivide"
<p class="jmdivide" > Text goes here</p>

this is a paragraph with the class "jmerror"
<p class="jmerror" > Text goes here</p>

this is a paragraph with the class "jmfire"
<p class="jmfire" > Text goes here</p>

this is a paragraph with the class "jmflag"
<p class="jmflag" > Text goes here</p>

this is a paragraph with the class "jmheart"
<p class="jmheart" > Text goes here</p>

this is a paragraph with the class "jmhome"
<p class="jmhome" > Text goes here</p>

this is a paragraph with the class "jminfo"
<p class="jminfo" > Text goes here</p>

this is a paragraph with the class "jmlist"
<p class="jmlist" > Text goes here</p>

this is a paragraph with the class "jmmail"
<p class="jmmail" > Text goes here</p>

this is a paragraph with the class "jmpeople"
<p class="jmpeople" > Text goes here</p>

this is a paragraph with the class "jmstar"
<p class="jmstar" > Text goes here</p>

this is a paragraph with the class "jmstat"
<p class="jmstat" > Text goes here</p>

Unordered lists

Default list

Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-dark"
Enter the class name to ul tag <ul class="jm-dark">

Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-light"
Enter the class name to ul tag <ul class="jm-light">

Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
- Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum
  - Duis tincidunt nunc sit amet ipsum

Ordered lists

Default list

Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
1. Duis tincidunt nunc sit amet ipsum
2. Duis tincidunt nunc sit amet ipsum
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-roman"
Enter the class name to ol tag <ol class="jm-roman">

Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
1. Duis tincidunt nunc sit amet ipsum
2. Duis tincidunt nunc sit amet ipsum
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-alpha"
Enter the class name to ol tag <ol class="jm-alpha">

Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
Duis tincidunt nunc sit amet ipsum
1. Duis tincidunt nunc sit amet ipsum
2. Duis tincidunt nunc sit amet ipsum
  1. Duis tincidunt nunc sit amet ipsum
  2. Duis tincidunt nunc sit amet ipsum
  3. Duis tincidunt nunc sit amet ipsum

Custom lists

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-account">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-cart">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-club">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-delivery">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-mastercard">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-secure">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-sizing">

Duis tincidunt nunc sit amet ipsum

This is a list with the class "jm-store-icons"
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-visa">

Duis tincidunt nunc sit amet ipsum

Social icons

Custom Layout

You can use the following code to create custom boxes in a single module position.
Note: You can use the following classes:
1) jm-box2 for 2 boxes in a row
2) jm-box3 for 3 boxes in a row
3) jm-box4 for 4 boxes in a row
4) Leave empty for 1 box only

<div class="jm-row jm-box3">
<div class="jm-box">
<div class="jm-box-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.
</div>
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum pellentesque tortor ut sollicitudin. Nullam neque arcu, placerat quis velit vitae, pharetra mollis magna.

Custom Services

Note: You can change icons by replacing the icon class. All classes for icons are listed in the "Custom lists" section in the "Typography" article.

<div class="jm-custom-service">
<div class="jm-row">
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-club"><a href="#">ModernStore Club</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-account"><a href="#">My Account</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
</div>
<div class="jm-row">
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-sizing"><a href="#">Size Chart</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
<div class="jm-box">
<div class="jm-box-in">
<h3 class="icon-cart"><a href="#">Terms of Service</a></h3>
<span class="jm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.</span>
<p><a class="readmore" href="#">Read More</a></p>
</div>
</div>
</div>
</div>

ModernStore Club

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

My Account

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

Size Chart

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

Terms of Service

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum accumsan ultricies. Integer posuere dignissim justo, eget vestibulum orci porttitor et.

Custom Categories

Note: If you remove the "jm-rounded" class, you will get the squares instead of the circles. This can be helpful if you have some longer category names.

<div class="jm-custom-categories jm-box3 jm-rounded">
<div class="jm-custom-box pink">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/girls.png" border="0" alt="Girls" /> <span class="category-name">Girls</span> </a></h2>
</div>
</div>
<div class="jm-custom-box blue">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/boys.png" border="0" alt="Boys" /> <span class="category-name">Boys</span> </a></h2>
</div>
</div>
<div class="jm-custom-box yellow">
<div class="jm-custom-box-in">
<h2><a href="#"> <img src="/images/modules/categories/newborns.png" border="0" alt="Newborns" /> <span class="category-name">Newborns</span> </a></h2>
</div>
</div>
</div>

Girls

Boys

Newborns

Custom Slide

This custom code you can use in a custom html module or as custom description for DJ-MediaTools slides.

<p><a href="#"><img src="/images/modules/top/1.jpg" alt="Stylish Shorts" /></a></p>
<div class="jm-custom-slide">
<h3><a href="#">Stylish Shorts</a></h3>
<span class="jm-slide-price">$59</span>
<span class="jm-slide-desc">offer valid until March 20th</span>
<p><a class="readmore" href="#">Readmore</a></p>
</div>

Stylish Shorts

$59 offer valid until March 20th

Custom Discount

<div class="jm-custom-discount">
<div class="jm-custom-left"><img src="/images/modules/model.jpg" alt="Model" /></div>
<div class="jm-custom-right">
<p><img src="/images/modules/more-or-less.png" alt="More or Less" /></p>
<h3>Get 15%<span class="jm">discount</span></h3>
<span class="jm">For all dresses, till March 20th</span>
<p><a class="readmore2" href="#">Check it!</a></p>
</div>
</div>

More or Less

Get 15%discount

For all dresses, till March 20th

Check it!

รายละเอียด: เขียนโดย Super User; สร้างเมื่อ: 23 มิถุนายน 2562

There are 5 available module designs that you can control by entering the correct suffix name to a module parameter. There are also additional suffixes for other modules and pages.
Let's check them all.

อ่านเพิ่มเติม...

รายละเอียด: เขียนโดย Super User; สร้างเมื่อ: 23 มิถุนายน 2562

JM Kids Fashion Store Joomla template uses fully responsive layout that adjusts to various screens: desktops, tablets or mobiles.
The template uses default width values specified at the template configuration.

อ่านเพิ่มเติม...

รายละเอียด: เขียนโดย Super User; สร้างเมื่อ: 23 มิถุนายน 2562

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque magna et orci porttitor ullamcorper. Proin euismod pretium dolor non consectetur. Aliquam feugiat nunc ac justo hendrerit, non lobortis lacus condimentum. Duis id erat nunc. Nam eu aliquam velit.

Pellentesque ligula nisl, hendrerit nec facilisis sit amet, faucibus ac nulla. Morbi et consectetur ante. Etiam eu sodales tortor, ac dapibus lectus. In laoreet tempor felis, in ornare urna consequat sit amet. Praesent vehicula libero ac tellus rutrum ultrices. Sed eu consectetur libero, id varius massa.

CSS3 animated hover effects for images

Title

Title

Title

Title

Image Borders

Headings

This is Heading One (h1)

This is Heading Two (h2)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)

This is Heading Six (h6)

Numered blocks

Colored blocks

Quote blocks

Icon blocks

Unordered lists

Ordered lists

Custom lists

Social icons

Read More Button

Read More Alternate Button

Custom Layout

Custom Services

Custom Categories

Custom Slide

Custom Discount

Get 15%discount

FOLLOW US

C &T Modular ผู้ผลิตและจำหน่าย-ให้เช่าตู้สำนักงานเคลื่อนที่|ตู้ห้องน้ำเคลื่อนที่|ตู้ป้อมยามสำเร็จรูป

Important

Our Service

Safe Payments

Contact