Como substiruir uma instrução que usa a Tag img pela que carrega a imagem como background da DIV ?

[jcvilanova]

Galera, sou novo em PHP, web etc. Estou criando uma pagina dinamica com MVC. Em um determinado ponto eu usei o seguinte código para preencher uma DIV com uma imagem do meu BD:

<div class="col mx-3 my-3 doub1 effect" style="background-image: url('<?php echo URL . 'assets/imagens/artigo/' . $imag; ?>'); width: 450px; height: 350px;">

e aproveitei para colocar um H2 que vai pegar o campo nome e um <p> que pega a descricão.

<h2><?php echo $nome; ?></h2>
<p><?php echo $descri; ?></p>

Pois bem... a div é preenchida completamente pela imagem e o Título e a descrição ficam por cima. Eu queria muito aplicar algum efeito interessante sobre essa imagem e encontrei na NET um exemplo em que ao passar o mouse sobre a imagem ela irá deslizar para a direita e mostrará a legenda com o título e a descrição. Vejam:

<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

O grande problema é que eu não usei a tag img no meu exemplo, como voces viram eu coloquei a imagem no background-image da DIV. Agora nao estou conseguindo aplicar o efeito na minha página porque não sei como adaptar esse código aí com o meu.
Como eu poderia usar esse exemplo no meu código ou mudar o meu código para usar esse ai sem causar danos aos resultados que já tenho ?

[jdgabriel]

Você pode colacar essa imagem dentro da div e trabalhar com possition no css.

<div> <!-- postition: relative - css  -->
  <p>seu texto</p>
  <img src="link_da_imagem" /> <!-- position: absosule - css -->
</div>

Você pode usar essa abordagem, assim terá total controle sobre a image quando fizer :hover na div

[jcvilanova]

Amigo Gabriel obrigado pelo dica. Consegui resolver aqui. Agora preciso de uma outra ajuda. Veja bem, a tarefa que recebi na faculdade como nota e a seguinte: um jogo chamado HOLDANNY que sorteia aleatoriamente 8 algarismos em cada sorteio. Recebi um documento do Word contendo os resultados de todos os sorteios ate agora, que são em media 500. A tarefa é criar um programinha que va la no word, e busque por determinadas palavras. Por exemplo: a pessoa vai escrever por exemplo M A Q U I N A S (sempre tem que ser palavras de 8 letras), ai o sistema vai la no word e busca em cada sorteio se em algum deles a palavra maquina se formou. Ja tentei de todas as formas mas não sai do lugar Voce pode me ajudar ?

…

________________________________ De: Gabriel Duarte ***@***.***> Enviado: quarta-feira, 5 de outubro de 2022 11:44 Para: frontendbr/forum ***@***.***> Cc: jcvilanova ***@***.***>; Author ***@***.***> Assunto: Re: [frontendbr/forum] Como substiruir uma instrução que usa a Tag img pela que carrega a imagem como background da DIV ? (Discussion #2341) Você pode colacar essa imagem dentro da div e trabalhar com possition no css. <div> <!-- postition: relative - css --> <p>seu texto</p> <img src="link_da_imagem" /> <!-- position: absosule - css --> </div> Você pode usar essa abordagem, assim terá total controle sobre a image quando fizer :hover na div — Reply to this email directly, view it on GitHub<#2341 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AVPREXT3HYMS7UBKK7VUK5LWBWWAFANCNFSM57VBAGLQ>. You are receiving this because you authored the thread.Message ID: ***@***.***>