Hover Effect of Image in Text Card

1124
4
Jump to solution
08-03-2021 01:56 PM
KaraUtter
Occasional Contributor III

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?

0 Kudos
2 Solutions

Accepted Solutions
KlaraSchmitt
Esri Contributor

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 

 

<style>
a.copycat-category-card {
  display: block;
  width: 150px;
  text-align: center;
}
a.copycat-category-card:hover{
  outline: #418499 solid 2px;
  text-decoration: none;
}
a.copycat-category-card:hover img {
  opacity: 0.6;
}
a.copycat-category-card div {
  color: #003580;
  margin-top: 20px;
}
</style>

 


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.

View solution in original post

0 Kudos
KlaraSchmitt
Esri Contributor

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.

View solution in original post

0 Kudos
4 Replies
KlaraSchmitt
Esri Contributor

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 

 

<style>
a.copycat-category-card {
  display: block;
  width: 150px;
  text-align: center;
}
a.copycat-category-card:hover{
  outline: #418499 solid 2px;
  text-decoration: none;
}
a.copycat-category-card:hover img {
  opacity: 0.6;
}
a.copycat-category-card div {
  color: #003580;
  margin-top: 20px;
}
</style>

 


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.

0 Kudos
KaraUtter
Occasional Contributor III

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?

KaraUtter_0-1628029405371.png

 

0 Kudos
KlaraSchmitt
Esri Contributor

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.

0 Kudos
KaraUtter
Occasional Contributor III

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

0 Kudos