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: Cardinal
• December 27, 2014 at 4:57 pm #137949
  rwolfenden

  Member

  Post count: 66

  I’m trying to get an image hover working in terms of getting another image to appear on hover.

  for example, in the link attached if you scroll to the grey background panel, the logos in white and pink, I want the white logo to be pink on hover (the pink equivalent image).

  At the moment, it just appears as a white background on hover, which I understand and know how to change.

  How can I change it so there is an image on hover?

  Thanks,
  Rob

  December 29, 2014 at 12:50 am #138020
  laranz – SUPPORT

  Member

  Post count: 3186

  Hi Rob,

  It is not possible with the image element form the page builder, but you can try some solution like this http://stackoverflow.com/a/11384564

  Let us know,

  Thanks,
  laranz.

  January 6, 2015 at 11:00 am #139297
  rwolfenden

  Member

  Post count: 66

  Hmmm, seems like a lot of fiddling to get something like that to work.

  How about changing the Transparency / Opacity of the white background on hover?

  January 6, 2015 at 11:08 am #139303
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  That’s available in the Theme Options > General

  – Kyle

  January 6, 2015 at 4:13 pm #139422
  rwolfenden

  Member

  Post count: 66

  Thanks Kyle, that effects everything though, I like 90% on certain elements, but on this one I only want a 10% or so opacity.

  Is it possible to target just this element and adjust/override the opacity?

  Thanks,
  rob

  January 6, 2015 at 4:18 pm #139429
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Which image are you referring to?

  – Kyle

  January 6, 2015 at 4:19 pm #139434
  rwolfenden

  Member

  Post count: 66

  This reply has been marked as private.
  January 6, 2015 at 4:23 pm #139441
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Looks like there is only about 10% opacity to me http://d.pr/i/1gvol/3Lw0UE4H

  January 6, 2015 at 4:32 pm #139443
  rwolfenden

  Member

  Post count: 66

  Yep, true – but its also affected the Social Grid overlay (see the instagram square). Which looked better at 90%.

  So, ideally I’d like to set globally, the opacity at 90% but then for the logos set those at 10%.

  Thanks,
  Rob

  January 6, 2015 at 4:49 pm #139449
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Put the opacity back to 90% and then I’ll provide you with some custom css to change the opacity for the logos

  – Kyle

  January 6, 2015 at 4:50 pm #139450
  rwolfenden

  Member

  Post count: 66

  Done. Wicked, thanks Kyle!

  Rob

  January 6, 2015 at 5:02 pm #139454
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this:

  figure.animated-overlay figcaption {
    background-color: rgba(255, 255, 255, 0.1);
  }

  – Kyle

  January 6, 2015 at 5:22 pm #139464
  rwolfenden

  Member

  Post count: 66

  Perfect! Thanks Kyle, much appreciated.

  January 6, 2015 at 5:48 pm #139467
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem

  – Kyle

• Back to forum

  Posted in: Cardinal