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.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP