← All elements
<div class="ro"><span class="act"><b>♡</b><b>↗</b></span></div>About this card
An image tile that dims on hover and slides up two round action buttons from the bottom edge.
How it works
A pseudo-element dark overlay fades in on hover. At the same time a row of two round buttons moves up from below the tile and fades in, because it starts translated down 70px with zero opacity.
Ways to customise it
- Add a third button inside .act.
- Change the overlay colour or opacity.
- Use it over a real photo.
Good to know
Touch users cannot hover, so consider keeping the actions visible on small screens. The buttons need real labels and links in production.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.