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="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>
Example 2
<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>
Example 3
<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>
Example 4
<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>
Example 5
<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>
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)
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 Three (h3)
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 Four (h4)
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 Five (h5)
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 Six (h6)
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.
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
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
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
- 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
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
- 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
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
- 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
Custom lists
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-account">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-cart">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-club">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-delivery">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-mastercard">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-secure">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-sizing">
Enter the class name to ul tag <ul class="jm-store-icons"> and li tag <li class="icon-visa">
Social icons
<a class="jm-facebook" href="#"> </a>
<a class="jm-twitter" href="#"> </a>
<a class="jm-rss" href="#"> </a>
<a class="jm-google" href="#"> </a>
</p>
Read More Button
Enter the class name to a tag <a class="readmore" />
Read More Alternate Button
Enter the class name to a tag <a class="readmore2" />
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-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>
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-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-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>
Custom Slide
This custom code you can use in a custom html module or as custom description for DJ-MediaTools slides.
<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>
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>
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.
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.
Предприятие основано в 1988 г. Изготовление изделий из ПВХ-ткани, в том числе непромокаемой верхней детской одежды, началось с 1989г. За 30 лет работы в нашей технологии никогда не применялись ткани китайскогого производства, а с 1999 г. используется материал только европейских изготовителей (Швеция, Чехия, Италия, Финляндия, Норвегия и др.). С 1994 по 2014 г. наша фабрика былй одной из самых крупных в Европе (120 работников) с мощностью производства порядка 300 000 изделий из ПВХ-ткани в год, при этом выпуск детской непромокаемой одежды составлял около 100 000 единиц. Предприятие оснащено самым современным оборудованием, таким как автоматизированный раскройный комплекс и сварочные станки (пр-ва Ю.Кореи и Японии), обеспечивающие высокую прочность и герметичность соединений (швов).
Выпускаемая одежда оснащена световозвращающими элементами (занимают до 10% от площади изделия), резинками с логотипом. На все выпускаемые изделия имеется действующий сертификат (декларация соответствия). Наш собственный зарегистрированный товарный знак - «Hippo». Также мы выпускаем изделия под брендами наших заказчиков. На предприятии внедрена и действует многоуровневая система контроля качества, включающая входной контроль сырья (ткани, фурнитуры), межоперационный контроль при изготовлении изделия от раскроя до сварки, финальный контроль при маркировке и упаковке изделий. Основой качества выпускаемых изделий является профессионализм коллектива предприятия и многолетний опыт работы. Можно с уверенностью сказать, что цены на выпускаемую нашим предприятием детскую верхнюю непромокаемую одежду из ПВХ являются самыми низкими на рынке
На некоторых интернет-ресурсах размещен видеоролик со съемкой работы цехов ООО «ТД Водолей», выдаваемый за демонстрацию производственных мощностей стороннего индивидуального предпринимателя (выступающего в ролике под видом «директора производства»). Данная съемка, относящаяся к периоду 2013-2014 г.г., на самом деле всего лишь показывает процесс изготовления изделий по заказу интернет-магазина. Остается непонятным, почему обычное размещение заказа под собственной торговой маркой покупатель решил выдать на своем сайте за наличие у него «собственного производства». Можно сравнить этот ролик со съемкой работы наших цехов в 2019 году.
Наша компания работает с поставщиками во всех крупных городах Российской Федерации:
О нас
Предприятие основано в 1988 г. и оснащено современным оборудованием: автоматизированный раскройный комплекс и сварочные станки, обеспечивающие высокую прочность и герметичность швов
Подробнее
Контакты
Мы всегда рады обсудить Ваши предложения и ответить вопросы по ассортименту и наличию интересующих моделей
Написать нам
Guarantee
Praesent faucibus imperdiet lorem nec mattis. Integer nec egestas tortor, vel volutpat urna.
Read More