Materialize.css inserir icon por cima de uma imagem do card

Stack Overflow em Português Asked by Laranja Mecânica on February 26, 2021

Olá,
Tenho alguns cards em materialize.css que gostava de inserir por cima da imagem (.card-image) um icon especifico (no exemplo o icon de video), mas não estou a conseguir.

<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>

Já tentei de várias maneiras mas não consegui.

css css3 materialize

One Answer

Ignorância minha. Está documentado na documentação do materialize que é possivel adicionar um titulo à image-card. Embora ainda não tenha conseguido centrar o icon ele já aparece sobre a imagem. Segue o código:

<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>

Answered by Laranja Mecânica on February 26, 2021

Add your own answers!

Ask a Question

Get help from others!