ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• May 29, 2014 at 7:10 am #78451
  gregcatmull

  Member

  Post count: 109

  When using the Single Image element with a page link, when you hover over the picture a transparent coloured block covers the image with a ‘link’ symbol.

  is there a way to remove the link symbol. I quite like the block transparent colour which cover the image.

  if this is not possible is there a way of removing the hover over colour and just simply having a clickable image?

  cheers
  Greg

  May 29, 2014 at 9:46 am #78497
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  To remove the link icon add this custom css:

  .overlay i {
    display: none;
  }

  To remove the hover effect completely, add this:

  .overlay {
    display: none;
  }

  – Kyle

  May 29, 2014 at 10:15 am #78508
  gregcatmull

  Member

  Post count: 109

  This didn’t work..

  .overlay i {
  display: none;
  }

  May 29, 2014 at 10:18 am #78512
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Please provide me with a link so I can check the css

  – Kyle

  May 29, 2014 at 10:18 am #78514
  gregcatmull

  Member

  Post count: 109

  shop.garsons.co.uk

  May 29, 2014 at 10:21 am #78517
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  This should work:

  .overlay .thumb-info i {
    display: none;
  }

  – Kyle

  May 29, 2014 at 10:35 am #78524
  gregcatmull

  Member

  Post count: 109

  still not working

  sorry to be a pain

  cheers
  Greg

  May 29, 2014 at 11:13 am #78539
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  You’ve got it within your media query, you haven’t closed the first query here:

  @media only screen and (max-width: 479px) { .woocommerce-count-wrap {
    display: none;
  }
  body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
    width: 100%!important; 
  }

  If you reduce you screensize to less than 479px you will see the css works

  – Kyle

  May 29, 2014 at 11:16 am #78543
  gregcatmull

  Member

  Post count: 109

  yes that great, but I don’t want the link icon at all not just on mobiles.

  May 29, 2014 at 11:21 am #78549
  gregcatmull

  Member

  Post count: 109

  Sorry ignore me, I’ve fixed it, I was being an idiot.

  cheers!
  Greg

  May 29, 2014 at 11:42 am #78562
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Ok no problem 🙂

  – Kyle

• Back to forum

  Posted in: Neighborhood