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 ?

[fchaves]

Para mover o background você pode usar a propriedade "background-position". Se quiser uma explicação mais detalhada dá uma olhada na w3schools.

/* Imagem centralizada */
div {
  background-image: url('imgem.jpg');
  background-position: center center;
}

/* Imagem canto superior esquerdo */
div {
  background-image: url('imgem.jpg');
  background-position: left top;
}

/* Imagem 30% da amrgem esquerda e -20% da margem inferior */
div {
  background-image: url('imgem.jpg');
  background-position: 30% -20%;
}

/* Imagem -100 pixels da margem esquerda e -50 pixels da margem inferior  */
div {
  background-image: url('imgem.jpg');
  background-position: -100px -50px;
}