Collective Theme Rollover Effect

• 

  invisibleshtick · Member · Jan 13, 2017 at 2:59 pm

  • Copy link
  • Add topic to favorites

  Hello, I am currently using the Collective Theme. On the landing page, I use a PNG image for the title. I do this through the Home Featured Page option. I want the PNG image, however, to change whenever I hover a mouse over it. Is this possible with the Collective Script?

  If it’s not possible to change the PNG image completely, would it at least be possible to augment the transparency of it via rollover?

  Thank you

  The blog I need help with is: (visible only to logged in users)

• 

  staff-loquaciousloon · Staff · Jan 13, 2017 at 4:06 pm

  • Copy link

  Hi @invisibleshtick!

  Collective doesn’t have a built in setting that will swap out the image for you, no – but I did notice you have a Premium Plan on your site, which means you can use some Custom CSS, which will help!

  You’re currently using an h1 tag with an a tag inside it. We can give use a couple of hover effects on those to try and achieve your goal. I’ve grabbed the URL of another image on your page, but you can swap that out for a different image you’d like to use instead.

  Try adding this code under My Site > Customize > CSS:

  /*Add a background image to the h1 on hover*/
  .row.featured-page-section h1:hover {
      background-image: url('https://prettyowlpoetry.files.wordpress.com/2016/10/fall-cover-rainbow-matrix.png');
  }
  
  /*make the anchor invisible on hover*/
  .row.featured-page-section h1:hover a {
  visibility: hidden;	
  }

  That should do the trick – although it does look like you have an extra, empty h1 tag above the image in the page you’re featuring, so the background image will try to appear on that as well until it’s removed.

  You also asked about changing the opacity, which you could do with this CSS:

  .row.featured-page-section h1:hover {
      opacity: .5;
  }

  With opacity, 1 is fully opaque, and 0 is completely transparent – you can assign any number between 0 and 1 :)

  Let me know how it looks!