Hey Beatriz, thanks for the tutorial. Just wondering, is there a way to add a slight zoom or opacity effect to the list item image on hover as well? (image zooming within the media container) I know this will only work on desktop but would be nice to indicate that its clickable for users.
Hey Celine! You're most welcome 🙌 And that's a great question. You can do that very easily with something like this: .user-items-list-simple .list-item .list-item-media img { transition: all .5s; } .user-items-list-simple .list-item:hover .list-item-media img { transform: scale(1.1); } You can adjust the timing of the transition to make the effect more blunt or subtle, and then replace the transform or add any other property you want to create the hover effect! Hope that helps.
Thank you! 🙌 And that's a great question. There may a way to make that happen but the approach depends on how you have the layout set up. Feel free to reach out through beatrizcaraballo.com/contact so I can take a look!
Thanks for the video! Can the buttons be hidden while still allowing the card to be clickable? I tried display: none but it removes the functionality of the button for all of the text.
My pleasure! And yes! They can be hidden but you'll need to use a little hack to make that happen: .user-items-list-simple .list-item-content__button-container { font-size: 0; margin: 0 !important; } .user-items-list-simple .list-item-content__button-container a { font-size: 0 !important; } By setting the font-size to 0 for both the button itself and the container holding it, you'll get rid of the height of the element making it invisible. And, by taking out the margin you'll close the gap between the content and the edge of the background color. Hope that helps!
@@beatrizecaraballoThis worked really well, thank you! I do have an issue where the buttons still show as just small empty boxes still. The text is gone and the buttons are smaller, but still showing. Have you seen this before? :)
I figured it out. I added a padding: 0 !important; tag to both of these and it removed the button while keeping the link click functionality :) Thanks for this!
