Substituir uma tag para receber uma imagem sem mudar o resultado da página

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

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

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 não 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 ?

[lowys]

Olá!
Ficou bem vago aí.
Não é possível visualizar nem reproduzir o efeito.
Ficou difícil entender de onde está e em qual resultado pretendes chegar.

Mas refatorar é isso mesmo!
você vai precisar reescrever parte do seu script pra implementar uma nova feature.
E isso inclui todo e qualquer ajuste necessário para que se adeque a estrutura atual, sem que sofra grande impacto

Se puder, envie screenshots pra gente tentar entender.
coloque o trecho html+css+js no codepen.io
ou se já tiver publicado o seu projeto, passe o link pra gente conferir

 

[Frank K Hosaka]

Ao invés de substituir, eu colocaria tudo dentro da <div>, assim:

 

<div>
   <ul>
    <li>
        <h2>Flor</h2>
        <p>Imagem obtida na internet</p>
    </li>
    <li><img src=<?="flor.jpg"?> width=450px height:350px alt="" /></li>
</ul>
</div>    

Note que eu mudei a variável do PHP (usei uma string para fazer funcionar no meu notebook). E também tirei todas as classes (eu acho que seria bem mais fácil se o pessoal mencionasse de vem o CSS, eu só sei que nenhum dos dois códigos usa o Bootstrap 5.2).

 

Editado Agosto 26, 2022 por Frank K Hosaka

[jcvilanova]

Bem, o problema é que to construindo o site com bootstrap e como não tenho muita experiencia, ainda estou começando, temo perder o que já consegui de layout. A questão aí é: como acessar a imagem desse background-imagem ? 

 

[lowys]

4 horas atrás, jcvilanova disse:

acessar a imagem desse background-imagem

Traduza
Acessar via css, js?
ou em php quando a página sofrer refresh?
Acessar pra saber os metadados da imagem?

[Frank K Hosaka]

20 horas atrás, jcvilanova disse:

Bem, o problema é que to construindo o site com bootstrap e como não tenho muita experiencia, ainda estou começando, temo perder o que já consegui de layout. A questão aí é: como acessar a imagem desse background-imagem ? 

 

No meu exemplo, eu coloquei a imagem no mesmo diretório do código php. Geralmente, o pessoal separa numa subpasta chamada "imagem", e assim deveriámos escrever o seguinte:

<li><img src=<?="imagens/flor.jpg"?> width=450px height:350px alt="" /></li>

Sobre o bootstrap, eu também estou estudando, e depois de dois meses na base da tentativa e erro, consegui implantar no meu projeto. Ele deixa o visual muito mais bonito, mas o problema é que você perde o controle de tudo. Eu sugiro você só se preocupar com a informação, você precisa entender a sintaxe do HTML, do PHP e do JavaScript, e deixar o CSS só quando sobrar muito tempo e paciência.

 

Editado Agosto 27, 2022 por Frank K Hosaka