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.
