Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

bsmtech

Member
  • Content Count

    3
  • Joined

  • Last visited

  1. Site URL: https://www.bluestonemanagement.com/ Hello! I am trying to create a hover effect over the first six images (Project Management, Quantity Surveying, etc.)so that when hovered over, they go from greyscale to colored. I'm having trouble finding/selecting the correct class (because nothing is happening when I do anything to the classes I find). What is the custom CSS needed to achieve this goal?
  2. How? There's no solution...
  3. Hi All, Using the code found on https://styleddigital.com/blog/2017/5/10/how-to-add-an-animated-counter-in-squarespace. It's edited to the below, but neither the icons nor the images are showing up. I'd prefer icons, but happy to settle with images (The second one has the image src tag within it) The preview doesn't help, When published it shows the counter working flawlessly, but the icons and images simply don't show up. What am I missing to have them appear? Code below (I don't know why it was removed without a reason before) <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var a = 0; $(window).scroll(function() { var oTop = $('#counter').offset().top - window.innerHeight; if (a == 0 && $(window).scrollTop() > oTop) { $('.counter-value').each(function() { var $this = $(this), countTo = $this.attr('data-count'); $({ countNum: $this.text() }).animate({ countNum: countTo }, { duration: 2000, easing: 'swing', step: function() { $this.text(Math.floor(this.countNum)); }, complete: function() { $this.text(this.countNum); } }); }); a = 1; } }); </script> <div id="counter"> <div class="sqs-col sqs-col-2 counter-value" data-count="18" data-desc="Countries"><i style="opacity: 1;color:#3996cc" class="fa fa-globe-americas fa-1x"></i><br>0</div> <div class="sqs-col sqs-col-2 counter-value" data-count="41" data-desc="Cities"><img src="https://images.squarespace-cdn.com/content/5cd5a139a56827a74ecd921e/1563403026857-BN8OZY9NU2JJILQSIBS3/cities.png?content-type=image%2Fpng"><br>0</div> <div class="sqs-col sqs-col-2 counter-value" data-count="33" data-desc="Airports"><i style="opacity: 1;color:#3996cc" class="fa fa-plane-departure fa-1x"></i><br>0</div> <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Brands"><i style="opacity: 1;color:#3996cc" class="fa fa-briefcase fa-1x"></i><br>0</div> <div class="sqs-col sqs-col-2 counter-value" data-count="1" data-desc="Billion in Construction"><i style="opacity: 1;color:#3996cc" class="fa fa-hard-hat fa-1x"></i><br>0</div> <div class="sqs-col sqs-col-2 counter-value" data-count="200" data-desc="Clients"><i style="opacity: 1;color:#3996cc" class="fa fa-handshake fa-1x"></i><br>0</div> </div> <style> .counter-value { font-size: 60px; line-height:2em; text-align:center; padding:17px 0; height: 150px; } .counter-value:after { content: attr(data-desc); display:block; text-transform:uppercase; font-size: 14px; line-height:1.2em; height: 150px; } </style>
×
×
  • Create New...