Hover Effect of Image in Text Card

KaraUtter

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?

KlaraSchmitt

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.