Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Cards – media

media hover click background image
    • 5 years, 1 month ago macolighting
      Participant

      Expired

      Hi,
      I was wondering which block/media/servicemedia you were using to create the three cards/items just below the hero image in your fitness demo?

      “Crossit workout” – “New gym apparel” – “Crossfit workout”

      The entire area is clickable, has an icon+heading+description and a hover-over effect with a background image.

      https://codeless.co/specular/fitness/

    • 5 years, 1 month ago Ludjon
      Keymaster

      Hi, are u using that demo? This style is specific to the fitness template and you cannot import it to another template. If you need I can send you some custom codes to fit your design.

      Thanks

    • 5 years, 1 month ago macolighting
      Participant

      Expired

      Hi,
      We are currently using the default demo and not the fitness demo.
      Please do send the code over for this as I’ll greatly appreciate it.

      Cheers
      Susan

    • 5 years, 1 month ago Ludjon
      Keymaster

      Custom css:

      .temp-img .media_align_left {
          margin-bottom: 0;
      }
      .media-over-content {
          position: absolute;
          bottom: 0;
          padding: 20px;
      }
      .media-over-content i {
          font-size: 24px!important;
      }
      .vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {
          background-color: #4db4c5;
      }
      .wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap input[type="text"], .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="tel"] {
          border: 1px solid #dddddd!important;
      }
      .media-over-content h4 {
          text-shadow: 1px 1px black;
      }
      #temp-img .wpb_column:hover .media_el.wpb_content_element.rounded_right_corners {
          transform: scale(1.03);
          cursor: pointer;
      }
      #temp-img .media_el.wpb_content_element.rounded_right_corners{
          box-shadow: 4px 4px 20px 2px rgba(0,0,0,0.2);
          border-bottom-right-radius: 50px!important;
          margin-bottom:0;
          border-radius:4px;
          filter:brightness();
          transition: 0.1s all ease-in-out;
      }
      #temp-img .media_el.wpb_content_element.rounded_right_corners::after {
          content: '';
          background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 20%, transparent 60%);
          width: 100%;
          height: 100%;
          position: absolute;
          display: block;
      }

      shortcodes:

      [vc_row text_color="light" el_id="temp-img"][vc_column width="1/3"][media rounded_right="1" image="365"][vc_column_text css_animation="fadeIn" el_class="media-over-content"]<i class="fas fa-dumbbell"></i>
      <h4>Crossfit workout</h4>
      <h5><span style="color: #4db4c5; font-weight: 600;">Push your limits</span></h5>
      [/vc_column_text][/vc_column][vc_column width="1/3"][media rounded_right="1" image="366"][vc_column_text css_animation="fadeIn" el_class="media-over-content"]<i class="fas fa-dumbbell"></i>
      <h4>New gym apparel</h4>
      <h5><span style="color: #4db4c5; font-weight: 600;">Look good, feel good</span></h5>
      [/vc_column_text][/vc_column][vc_column width="1/3"][media rounded_right="1" image="367"][vc_column_text css_animation="fadeIn" el_class="media-over-content"]<i class="fas fa-dumbbell"></i>
      <h4>Crossfit workout</h4>
      <h5><span style="color: #4db4c5; font-weight: 600;">Push your limits</span></h5>
      [/vc_column_text][/vc_column][/vc_row]

      place it to the end of page(classic editor) then open with wpbakery to edit

      Thanks

    • 5 years, 1 month ago macolighting
      Participant

      Expired

      Hi Ludjon,
      Thank you for the code. Is there anything more to this?
      I’ve placed the code into the classic editor, swapped to wpbakery to edit and then previewed.

      It produces nothing visible in preview, see attached images(1 and 2) in link below

      https://macolighting-my.sharepoint.com/:f:/g/personal/susanne_zencontrol_com/EsHT1dtJExlJlGX-2k4lf64BixTlUoVStBd1-ZxZyzUUZQ?e=ObKsbL

      Something not working with the shortcodes?
      Copying the elements from your demo and pasting it into classic editor works(image 3-4) suggesting the css is being read and is correct.

      I’ve managed to re-create the cards as individual text blocks(5-6). The entire element currently doesnt link, only the text, they zoom on hover and have a selector arrow which suggest they should be clickable so I still need the shortcodes to make this correctly.

      Cheers

      • This reply was modified 5 years, 1 month ago by macolighting.
      • This reply was modified 5 years, 1 month ago by macolighting.
      • This reply was modified 5 years, 1 month ago by macolighting.
    • 5 years, 1 month ago Eldo
      Keymaster

      Hello,

      The fast solution is to share with us your wp credentials and online link (private reply) so we can check it for you.

      Let me know.

      Regards!

Viewing 5 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password