Rollover / Hover with CSS

• 

  supportthehusqvarnagarden · Member · May 5, 2016 at 3:03 am

  • Copy link
  • Add topic to favorites

  I am wanting to add rollovers to some images on one of my pages. I am wanting to replicate the rollovers here http://www.charlieatchelsea.com/the-scenes-behind.html

  Can I please have some assistance with what custom CSS I need to add aswell as the code for the images?

  Thanks

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

• 

  thesacredpath · Member · May 5, 2016 at 5:25 am

  • Copy link

  Hi, I’m not sure if I can do this or not on Sela. Can you tell me which page you wish to do this on?

• 

  supportthehusqvarnagarden · Member · May 5, 2016 at 5:54 am

  • Copy link

  It’s the Behind the Scenes page. https://supportthehusqvarnagarden.com/behind-the-scenes/

• 

  thesacredpath · Member · May 5, 2016 at 9:13 pm

  • Copy link

  Hmmm, this may be difficult on Sela since I don’t have an “overlay” div to work with. Let me see what I can do with this for you. Stay tuned.

• 

  supportthehusqvarnagarden · Member · May 9, 2016 at 11:47 pm

  • Copy link

  Any luck with this one?

• 

  thesacredpath · Member · May 10, 2016 at 2:38 am

  • Copy link

  I’ve not had much luck with this. On that page you reference, the HTML used is actually invalid. It has HTML div tags within the “a” element, and you can’t do that. I tried to slip it past our software, but it corrects the invalid HTML.

  We could do this the old-school way with a hover and an image with a translucent background. You would need 5 rules total. 1 general that sets a position: relative on the enclosing div, and then one each rule for each of the images that bring in the image on hover using an after pseudo class.

  You can see the basic operation here: http://flippintestblog.com/image-hover-sela/

  This would be what the general HTML would look like for a single image.
  <div class="img-rel"><a class="rollover-1" href="URL_OF_LINK"><img class="alignnone" src="URL_OF_IMAGE" width="300" height="200" /></a></div>
  And this would be the CSS. The first rule is a general rule, and not repeated. The “rollover-1 rule would need to repeated (2, 3, 4) for the other images.

  .img-rel {
      position: relative;
  }
  a.rollover-1:hover::after {
      content: url("URL_OF_IMAGE");
      left: 0;
      position: absolute;
      top: 0;
  }

• 

  kristybradford8 · Member · May 10, 2016 at 4:01 am

  • Copy link

  Thanks very much for your help, I think we might give it a miss as this is going to be a dynamic page and the client will need to add to it themselves.

• 

  supportthehusqvarnagarden · Member · May 10, 2016 at 4:03 am

  • Copy link

  Whoops sorry just noticed I was logged into another account :)

• 

  thesacredpath · Member · May 10, 2016 at 6:21 am

  • Copy link

  No worries, and you are welcome.