0

I am creating a website but have come across a problem. I want to create a sort of expanding gallery that expands when you hover over a cover image. I want the cover image to have a material design lite badge that says the amount of images in that gallery. My problem is that I cannot find a way for the badge to show up on an image. For some reason, it just doesn't work. My current workaround is this: HTML:<main class="mdl-layout__content"> <br> <br> <div id="gall1" class="material-icons mdl-badge mdl-badge--overlap" data-badge="2"></div> </main>

CSS:#gall1{ background-image: url('20152016.png') center / cover; }

But it still is not working. Does anyone have any thoughts, solutions, or ideas as to why this is not working?

Thanks.

Bryson Shier
  • 89
  • 2
  • 8
  • 1
    You'd need to give a more complete demo that provides the various parameters you're working with. It might need to involve positioning, z-index etc., but your actual situation is unknown. Often I like to use `::before` / `::after`` for this sort of thing. – ralph.m Apr 08 '16 at 04:17
  • http://www.getmdl.io/components/index.html#badges-section – Bryson Shier Apr 09 '16 at 02:48
  • Not sure what I'm supposed to look at there. :-( – ralph.m Apr 09 '16 at 07:52

0 Answers0