topic Re: Hover Effect of Image in Text Card in ArcGIS Hub Questions

Hover Effect of Image in Text Card

KaraUtter — Tue, 03 Aug 2021 20:56:29 GMT

Trying to figure out how to create a hover effect for my text card that matches exactly the category cards in the same row. I created a text card that mirrors the look of the category card for my Noxious Weeds and Pests category because it needed to link to another hub site - at first glance they look the same but the interaction is different relative to the hover effects. Please go to Valley County GIS Portal (arcgis.com) and scroll to the bottom categories row to view what I'm referring to.

I have been through many reference sites on bootstrap, html, css and keep finding things that might work but I can't get them to work. I'm a beginner in the ways of html and css but can hack a few things her and there.

Does anyone have any advice?

Re: Hover Effect of Image in Text Card

KlaraSchmitt — Wed, 04 Aug 2021 13:12:11 GMT

Hi Kara,

The hover state we're using on the category cards is outline: #0079c1 solid 2px and opacity: 0.6; on the image. But what you'll need to do is make sure that your link wraps around both the image and the text in order to get that block outline effect. At the moment, you have two separate links and that's why you aren't getting the unified hover look.

The structure that you are looking for with your HTML will be something more like this:

<a href="https://noxious-weed-valleycounty.hub.arcgis.com/" class="copycat-category-card"> <img src="https://valleycounty.maps.arcgis.com/sharing/rest/content/items/1ec5c39b460847bfbe16855da64bac3b/data" alt="Noxious Weeds and Pests" style="width: 120px; height: 120px; margin-top: 10px;"> <div> Noxious Weeds and Pests </div> </a>

Then in an embed style tag above the HTML, you'll want

You may also wish you use spacer cards on either side of your Text Card rather than try to deal with the Bootstrap 3 grid classes. I've included a grid class on the HTML above (see col-sm-2). But you can either strip that off and use spacers, or add empty divs before and after your card set to col-sm-4. (You want the sum total of the cards in your row to equal 12 and you can do that with the layout editor and let it take care of sizing for you or you can do it with code in a single Text Card that the layout editor will set to 12, but then you are essentially subdividing inside of it.)

Edit: Updated code snippets.

Re: Hover Effect of Image in Text Card

KaraUtter — Tue, 03 Aug 2021 22:23:45 GMT

Hi @KlaraSchmitt !

I had seen a few of your examples of html/css in hub while I was trying to figure this out. Thank you for responding!

I tried what you said above and still didn't get the hover effect. Should my HTML builder look like this?

Re: Hover Effect of Image in Text Card

KlaraSchmitt — Wed, 04 Aug 2021 13:18:44 GMT

Hi Kara,

My apologies, there was an error in my code. You can see that I put the .copycat-category-card class on the actual link element, but then in the style tags, I told you .copycat-category-card a to target it and there's no way that would work because <a> would have to be a nested element of .copycat-category-card. It should have been a.copycat-category-card which means find the <a> that has the class of .copycat-category-card attached and then apply the hover as a pseudo class. I've updated the code snippets above.

Re: Hover Effect of Image in Text Card

KaraUtter — Wed, 04 Aug 2021 13:55:14 GMT

Yes! Thank you so much Klara! That was one of the finishing touches I needed before go-live for our Hub site.