Tag exchange with javascript

Question

I want to tag p be replaced by img in Hover, already bringing an image I have in the directory. Is it possible to do something similar? If possible, in the same function.

Code:

$(function(){
  $(".produto").hover(function(){
    $(this).toggleClass('produtocomprar produto');
  });
});

.produto {  
  position: relative;  
  width: 190px;  
  height: 342px;  
  margin-left: 40px;
  margin-top: 20px;
  float: left;  
  display: flex;  
  flex-direction: column; 
  background-color: #ffffff; 
} 


.produtocomprar {
    position: relative;  
    width: 190px;  
    height: 340px;  
    margin-left: 40px;
    margin-top: 20px;
    background: #f6f6f6;
    float: left;  
    display: flex;  
    flex-direction: column; 
    border-radius: 5px;
    border: dotted 1px;
    box-shadow: 1px rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produto">
  <div class="produtodesc">
    <h5 class="produtotitulo">Hidratante Andiroba Linha Amazônica</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac 
accumsan erat.</p>
    <div class="prodpreco">
      <h4 class="de">De: R$ 150,00</h4> 
      <h3 class="por">Por: R$ 80,00</h3>
    </div>
    <a href="#" class="detalhes">+ Detalhes</a>
  </div>
</div>

Answer 1

André, you need to add the tag <img> with your image and so manipulate it with its jquery function. Follow an example.

$(function() {
  $(".produto").hover(function() {
   $(".produto-detalhes").toggleClass("pdroduto-hidden");
   $(".produto-imagem").toggleClass("produto-imagem-show");
  });
});

.produto {
  position: relative;
  width: 190px;
  height: 342px;
  margin-left: 40px;
  margin-top: 20px;
  float: left;
  display: flex;
  border: dotted 1px rgba(0,0,0,0);
  flex-direction: column;
  background-color: #ffffff;
}

.produto:hover {
  background: #f6f6f6;
  border-radius: 5px;
  border: dotted 1px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.produto-imagem {
  display: none;
  transition:0.3s;
}

.produto-imagem-show {
  display: block;
}

.pdroduto-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="produto">
  <div class="produtodesc">
    <h5 class="produtotitulo">Hidratante Andiroba Linha Amazônica</h5>

    <img src="https://placeimg.com/190/130/tech" alt="" class="produto-imagem">

    <p class="produto-detalhes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac accumsan erat.</p>

    <div class="prodpreco">
      <h4 class="de">De: R$ 150,00</h4>
      <h3 class="por">Por: R$ 80,00</h3>
    </div>
    <a href="#" class="detalhes">+ Detalhes</a>
  </div>
</div>

Answer 2

You don’t need javascript, you can do it with css, hide the image, and in the parent div’s Hover show one and hide the other:

.produtodesc img {
  display: none;
}
.produtodesc:hover p {
  display: none;
}
.produtodesc:hover img {
  display: block;
}
.produto {  
  position: relative;  
  width: 190px;  
  height: 342px;  
  margin-left: 40px;
  margin-top: 20px;
  float: left;  
  display: flex;  
  flex-direction: column; 
  background-color: #ffffff; 
} 


.produtocomprar {
    position: relative;  
    width: 190px;  
    height: 340px;  
    margin-left: 40px;
    margin-top: 20px;
    background: #f6f6f6;
    float: left;  
    display: flex;  
    flex-direction: column; 
    border-radius: 5px;
    border: dotted 1px;
    box-shadow: 1px rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produto">
  <div class="produtodesc">
    <h5 class="produtotitulo">Hidratante Andiroba Linha Amazônica</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac 
accumsan erat.</p>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShT4IeDM1hqoW-SY_q3WrvniwjzUyaLUIJffeIJv379zfHzY3iCA" alt="">
    <div class="prodpreco">
      <h4 class="de">De: R$ 150,00</h4> 
      <h3 class="por">Por: R$ 80,00</h3>
    </div>
    <a href="#" class="detalhes">+ Detalhes</a>
  </div>
</div>