Feature Request: Hover Effect on Grid Items (Color/Image Change)

[chris-gaskell]

Description

Could there be a demonstration of how to implement a hover effect for the grid listing page that changes either the background color or displays a background image when a user hovers over an item?

[mcanouil]

That's pure HTML/JavaScript.
For short, you have to learn this on your own as Quarto cannot teach any possible use of HTML/(S)CSS/JavaScript tools.

Quarto is using Bootstrap, so take a look at the documentation and learn/implement it.
See https://getbootstrap.com/docs/5.3/getting-started/introduction/.

Simple hover effect can also be achieved via (S)CSS, see for example https://www.w3schools.com/CSSref/sel_hover.php.

See also custom listings: https://quarto.org/docs/websites/website-listings-custom.html

If you want a simple hover effect, you can use your favourite browser inspect/developer mode to know what element to target.
For example, in a default blog project

div.quarto-post:hover {
  background-color: #b22222;
}