How can I make a clickable image in Bulma change the pointer on mouseOver like <button does>?

Question

Loving the Bulma flow. Just wanted to make my images more obvious that they can do things when clicked.

I can bind a style with vue.js such as

<figure class="image is-128x128">
<img v-bind:src="currentTrack.coverURL"   
@mouseover="hover = true" 
@mouseleave="hover = false"
@click="playAudio()" 
:style="hover ? {opacity:0.5} : {opacity:1}" alt=""/>
</figure>

but the mouse pointer doesn't change to something that might help it seem more button like... wondering if there is an easy Bulma attribute I can add

thanks in advance!

Minardi

Answer 1

For Bulma v0.9.1 and newer

As noted by @Relisora, the class is-clickable now ships natively with Bulma, so no extra CSS is required.

---

Older versions

Bulma doesn't have a built-in class for that currently, unfortunately.

You can, however, easily create a class for that! To follow Bulma conventions, let's call it is-clickable, and define it using CSS:

.is-clickable {
  cursor: pointer;
}

Now just include the class in the <figure>-element.

You can read more about the cursor-rule on MDN.

Applecart

Is it also possible to make it hoverable with some text appearing? – Ghislainegholston

Answer 2

Bulma >= 0.9.1

Use the Bulma class is-clickable.

reference - commit

Bulma < 0.9.1

You will have to add the CSS yourself, here is the code bulma used :

.is-clickable {
  cursor: pointer !important;
}

Leathaleather