Assign modules on offcanvas module position to make them visible in the sidebar.

Main Menu

Find your house !

joomla

  • Typography

    Animated hover CSS3 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="ch-item ch-first" style="background: url('/joomla30/jm-realestateads/images/modules/animated.jpg') no-repeat;"> <div class="ch-info"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="/joomla30/jm-realestateads/#link">CHECK OUR<br /><span class="smaller">NEW OFFER!</span></a></p> </div> </div> </div> </div> </div>

     

     

    Example 2

    <div class="ch-item ch-second" style="background: url('/joomla30/jm-realestateads/images/modules/animated.jpg') no-repeat;"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front"> </div> <div class="ch-info-back"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="/joomla30/jm-realestateads/#link">CHECK OUR<br /><span class="smaller">NEW OFFER!</span></a></p> </div> </div> </div> </div> </div> </div> </div>

     

     

    Example 3

    <div class="ch-item ch-third"> <div class="ch-info"> <div class="ch-info-front" style="background: url('/joomla30/jm-realestateads/images/modules/animated.jpg') no-repeat;"> </div> <div class="ch-info-back"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="/joomla30/jm-realestateads/#link">CHECK OUR<br /><span class="smaller">NEW OFFER!</span></a></p> </div> </div> </div> </div> </div> </div>

     

     

    Video

    <div class="view view-video"><img src="/joomla30/jm-realestateads/images/modules/video.jpg" border="0" alt="Video" /> <div class="mask"> <span class="space"> &nbsp; </span> <a class="modal readmore" href="/joomla30/jm-realestateads/#link" rel="{handler: 'iframe', size: {x: 800, y: 600}}"><span class="jm">Watch Video</span></a></div>

     

     

    Image Borders

    <img class="border_img1" src="/joomla30/jm-realestateads/image.jpg" />
    Typography

     

    <img class="border_img2" src="/joomla30/jm-realestateads/image.jpg" />

     

    <img class="border_img3" src="/joomla30/jm-realestateads/image.jpg" />
    Typography

     

    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

    <p class="jm-block"><span class="jm">01</span>Text goes here</p>

    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.

    <p class="jm-block second"><span class="jm">a</span>Text goes here</p>

    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-color"
    Enter the class name to ul tag <ul class="jm-color">
    • 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-color2"
    Enter the class name to ul tag <ul class="jm-color2">
    • 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
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. 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">
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. 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">
    1. Duis tincidunt nunc sit amet ipsum
    2. Duis tincidunt nunc sit amet ipsum
    3. 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

     

    Header Search Slogan (header)

    <div class="jm-custom-title">Find Your sweet home!</div> <div class="jm-custom-subtitle">Lorem ipsum dolor</div>

     

    Find Your sweet home!
    Lorem ipsum dolor

     

    Header Advanced Search (header)

    <div style="text-align: center;"> <p class="jm-advanced"><span class="jm-advanced-link">Advanced search</span></p> </div>

     

    Advanced search

     

    Here you will sell quickly and find things easy! (top-1)

    <div class="clearfix"> <div class="jm-box col3"> <div class="icon"><a href="/joomla30/jm-realestateads/#link"><img src="/joomla30/jm-realestateads/images/modules/front/icon1.png" alt="" /></a></div> <h3 class="title">Best Ads Only</h3> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> <div class="jm-box col3"> <div class="icon"><a href="/joomla30/jm-realestateads/#link"><img src="/joomla30/jm-realestateads/images/modules/front/icon2.png" alt="" /></a></div> <h3 class="title">Driving Directions</h3> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> <div class="jm-box col3"> <div class="icon"><a href="/joomla30/jm-realestateads/#link"><img src="/joomla30/jm-realestateads/images/modules/front/icon3.png" alt="" /></a></div> <h3 class="title">Contact Real Estate Agent</h3> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> </div>

     

    Best Ads Only

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Driving Directions

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Contact Real Estate Agent

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

     

    Special Offer (dj-mega-classifieds1)

    <div class="jm-special clearfix"> <div class="td1"><img src="/joomla30/jm-realestateads/images/modules/house2.jpg" border="0" /></div> <div class="td2"> <h3 class="title">Langham Place</h3> <a class="category" href="/joomla30/jm-realestateads/#link">For Sale</a> <div class="price">$600 000</div> <a class="readmore2" href="/joomla30/jm-realestateads/#link">check offer</a></div> </div>

     

    Langham Place

    For Sale
    $600 000
    check offer

     

    Read More Button

    This is a read more link with the class "readmore"
    Enter the class name to a tag <a class="readmore" />

    Read more

     

    This is a read more link with the class "readmore2"
    Enter the class name to a tag <a class="readmore2" />

    Read more

     

    This is a read more link with the class "readmore3"
    Enter the class name to a tag <a class="readmore3" />

    Read more

     

    Glyphicon Font

    icon-asterisk
    icon-plus
    icon-euro
    icon-minus
    icon-cloud
    icon-envelope
    icon-pencil
    icon-glass
    icon-music
    icon-search
    icon-heart
    icon-star
    icon-star-empty
    icon-user
    icon-film
    icon-th-large
    icon-th
    icon-th-list
    icon-ok
    icon-remove
    icon-zoom-in
    icon-zoom-out
    icon-off
    icon-signal
    icon-cog
    icon-trash
    icon-home
    icon-file
    icon-time
    icon-road
    icon-download-alt
    icon-download
    icon-upload
    icon-inbox
    icon-play-circle
    icon-repeat
    icon-refresh
    icon-list-alt
    icon-lock
    icon-flag
    icon-headphones
    icon-volume-off
    icon-volume-down
    icon-volume-up
    icon-qrcode
    icon-barcode
    icon-tag
    icon-tags
    icon-book
    icon-bookmark
    icon-print
    icon-camera
    icon-font
    icon-bold
    icon-italic
    icon-text-height
    icon-text-width
    icon-align-left
    icon-align-center
    icon-align-right
    icon-align-justify
    icon-list
    icon-indent-left
    icon-indent-right
    icon-facetime-video
    icon-picture
    icon-map-marker
    icon-adjust
    icon-tint
    icon-edit
    icon-share
    icon-check
    icon-move
    icon-step-backward
    icon-fast-backward
    icon-backward
    icon-play
    icon-pause
    icon-stop
    icon-forward
    icon-fast-forward
    icon-step-forward
    icon-eject
    icon-chevron-left
    icon-chevron-right
    icon-plus-sign
    icon-minus-sign
    icon-remove-sign
    icon-ok-sign
    icon-question-sign
    icon-info-sign
    icon-screenshot
    icon-remove-circle
    icon-ok-circle
    icon-ban-circle
    icon-arrow-left
    icon-arrow-right
    icon-arrow-up
    icon-arrow-down
    icon-share-alt
    icon-resize-full
    icon-resize-small
    icon-exclamation-sign
    icon-gift
    icon-leaf
    icon-fire
    icon-eye-open
    icon-eye-close
    icon-warning-sign
    icon-plane
    icon-calendar
    icon-random
    icon-comment
    icon-magnet
    icon-chevron-up
    icon-chevron-down
    icon-retweet
    icon-shopping-cart
    icon-folder-close
    icon-folder-open
    icon-resize-vertical
    icon-resize-horizontal
    icon-hdd
    icon-bullhorn
    icon-bell
    icon-certificate
    icon-thumbs-up
    icon-thumbs-down
    icon-hand-right
    icon-hand-left
    icon-hand-up
    icon-hand-down
    icon-circle-arrow-right
    icon-circle-arrow-left
    icon-circle-arrow-up
    icon-circle-arrow-down
    icon-globe
    icon-wrench
    icon-tasks
    icon-filter
    icon-briefcase
    icon-fullscreen
    icon-dashboard
    icon-paperclip
    icon-heart-empty
    icon-link
    icon-phone
    icon-pushpin
    icon-usd
    icon-gbp
    icon-sort
    icon-sort-by-alphabet
    icon-sort-by-alphabet-alt
    icon-sort-by-order
    icon-sort-by-order-alt
    icon-sort-by-attributes
    icon-sort-by-attributes-alt
    icon-unchecked
    icon-expand
    icon-collapse-down
    icon-collapse-up
    icon-log-in
    icon-flash
    icon-log-out
    icon-new-window
    icon-record
    icon-save
    icon-open
    icon-saved
    icon-import
    icon-export
    icon-send
    icon-floppy-disk
    icon-floppy-saved
    icon-floppy-remove
    icon-floppy-save
    icon-floppy-open
    icon-credit-card
    icon-transfer
    icon-cutlery
    icon-header
    icon-compressed
    icon-earphone
    icon-phone-alt
    icon-tower
    icon-stats
    icon-sd-video
    icon-hd-video
    icon-subtitles
    icon-sound-stereo
    icon-sound-dolby
    icon-sound-5-1
    icon-sound-6-1
    icon-sound-7-1
    icon-copyright-mark
    icon-registration-mark
    icon-cloud-download
    icon-cloud-upload
    icon-tree-conifer
    icon-tree-deciduous