Materialize.css insert icon over an image of the card

Question

Materialize.css insert icon over an image of the card

Navigation

#1 by (0 votes)

0

Hello, I have some cards in materialize.css that I would like to insert over the image (.card-image) a specific icon (in the example the video icon), but I am not able to.

<div class="card-image waves-effect waves-block waves-light" v-if="impar(index)">
                <img class="responsive-img" data-target="modal-{{noticia.id}}" @click.prevent.sync="openModal(noticia.id)"
                     :src="'storage/noticias/images/' + noticia.photo"
                     :class="{'activator': noticia.videoValue}"/>
                <div v-if="noticia.videoValue == false" class="video-icon-noticias valign-wrapper">
                    <a href="#" data-target="modal-{{noticia.id}}"  class="playIcon" @click.prevent.sync="openModal(noticia.id)">
                        <i class="large material-icons">play_circle_outline</i>
                    </a>
                </div>
            </div>

I have tried in many ways but I have not been able to.

css css3 materialize

asked by anonymous 05.05.2017 / 13:46

1 answer

I can not insert my html document into a web page through f12 Hide domain directory using htaccess

score 0 · Answer 1

Ignorance of mine. It is documented in the materialize documentation that it is possible to add a title to the image-card. Although it has not yet managed to center the icon it already appears on the image. Here is the code:

<div class="card-image waves-effect waves-block waves-light valign-wrapper" v-if="impar(index)">
                <img class="responsive-img" data-target="modal-{{noticia.id}}" @click.prevent.sync="openModal(noticia.id)"
                     :src="'storage/noticias/images/' + noticia.photo"
                     :class="{'activator': noticia.videoValue}"/>
                <span class="card-title center">
                    <div v-if="noticia.videoValue == false" class="video-icon-noticias valign center-block">
                        <a href="#" data-target="modal-{{noticia.id}}" class="playIcon" @click.prevent.sync="openModal(noticia.id)">
                            <i class="large material-icons">play_circle_outline</i>
                        </a>
                    </div>
                </span>
            </div>