Guide: Only show Description when hovering?

Answered

7 Comments

  • Chris Stock

    Hi Robert, this is fairly straightforward to achieve with css. It will look something like this.

    HTML

    <ul class="category-list">
      {{#each categories}}
      <li class="category-item">
        <a href='{{url}}' class="category-item-link">
          <h6 class="category-item-title">{{name}}</h6>
          <p class="category-item-description">{{description}}</p>
        </a>
       </li>
    </ul>
     

    CSS

    .category-item-description {
       display: none;
    }

    .category-item-list:hover.category-item-description {
       display: block;
    }
     

    Your class names will probably be different, and it's likely they'll already have some styling applied to them, but this is the general principle.

    You can also look into css transitions to make the reveal look a bit jazzier. You'll also want to consider what the behaviour should be on touch-screen devices where there is no mouse hover.

    0
  • Robert Koch

    Hey Chris! 

    This is great, thank you! I think I am a bit confused... here is my code. 

     

    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <!--Images for categories Home Page -->
    {{#is id 360000558011}}<img class="" src="{{asset 'gettingstarted.png'}}" />{{/is}}
    {{#is id 360000766211}}<img class="" src="{{asset 'faq.png'}}" />{{/is}}
    {{#is id 360000469012}}<img class="" src="{{asset 'reservations.png'}}" />{{/is}}
    {{#is id 360000619291}}<img class="" src="{{asset 'settings.png'}}" />{{/is}}
    {{#is id 360000484611}}<img class="" src="{{asset 'marketing.png'}}" />{{/is}}
    {{#is id 360000604792}}<img class="" src="{{asset 'crm.png'}}" />{{/is}}
    {{#is id 360000558111}}<img class="" src="{{asset 'integrations.png'}}" />{{/is}}
    {{#is id 360000604772}}<img class="" src="{{asset 'reporting.png'}}" />{{/is}}
    {{#is id 360000469032}}<img class="" src="{{asset 'concierge.png'}}" />{{/is}}
    <!--End images for categories -->
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{else}}
    {{#each sections}}
    <li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

     

    Where exactly would I put your piece in?

    0
  • Trapta

    Hi @Robert,

    Go to style.css and paste the below code at the bottom of your file:

    .blocks-item-description{display: none;}
    .blocks-item:hover .blocks-item-description {display: block;}

    Let us know if you face any issue.

    Team Diziana

    1
  • Robert Koch

    Amazing! Thank you! Is there a way to hide the category name title when I hover and only show the description?

    0
  • Trapta

    Yes, just add the below line too with the above code:

    .blocks-item:hover .blocks-item-title {display: none;}

    Team Diziana

    0
  • Robert Koch

    Hey @Trapta 

    This has been awesome, but it looks like this causes the block to change sizes which looks a bit strange - any advice here?

     

    https://cl.ly/d5e49e619c3b

    0
  • Trapta

    Hi @Robert Koch,

    Try replacing the previous code with the below code:

    .blocks-item-description,
    .blocks-item-description:not(:empty) {
    display: none;
    margin-top: 0;
    }

    .blocks-item:hover .blocks-item-title {display: none;}
    .blocks-item:hover .blocks-item-description {display: block;}

    Let me know if this solves the issue.

    Team Diziana

    0

Please sign in to leave a comment.

Powered by Zendesk