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 ?
