Hover with border and CSS image

Question

I am developing a web application and I would like that when you do not move the mouse over the image, stay on the screen only the image, without the product description, the price and the border around it.

Image without the effect of Hover.

And when I hover over the image I would like the image to be surrounded by the border and the product description, price and the Learn more button.

Image with Hover

HTML

 <div class="col-sm-3 col-md-3">


            <div class="linha">

                <img src="imagens/camisa_1.JPG" alt="camisa1" class="imagem_teste">
                  <a href="#"  onMouseOver="mostrarElemento('saiba_mais1', 'inline');"  
                     onMouseOut="mostrarElemento('saiba_mais1', 'none');" > 


    <p class="descricao_produto">Calça Jeans Armani</p>

<h4 class="preco"> A partir de R$134,99</h4>
     <button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 

       </a>



        </div>
            </div>

CSS

.linha{
 border: 1px solid #E0E0DA;
height: 390px;
}

.descricao_produto{
color:black;
font-weight: 700;
}
.preco{
color:red;
}

JS

<script language="JavaScript">
    function mostrarElemento(id, visibilidade) {
        document.getElementById(id).style.display = visibilidade;
    }
</script>

Answer 1

You can do this without using Javascript, only with CSS:

.linha{
border: 1px solid #fff;
display: inline-block;
padding: 10px;
}

.descricao_produto{
color:black;
font-weight: 700;
}

.preco{
color:red;
}

.linha a{
	display: none;
}

.linha:hover a{
	display: inline-block;
}

.linha:hover{
	border-color: #E0E0DA;
}

<div class="col-sm-3 col-md-3">
	<div class="linha">
		<img height="100" src="https://static.hering.com.br//sys_master/images/he3/h01/9378553102366.jpg" alt="camisa1" class="imagem_teste" />
    <br />
		<a href="#">
			<p class="descricao_produto">Calça Jeans Armani</p>
			<h4 class="preco"> A partir de R$134,99</h4>
			<button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 
		</a>
	</div>
</div>

Answer 2

Hide the item that contains the class saiba_mais thus:

.saiba_mais {
  display: none;
}

And to appear, you can grab any mouse area that is inside the item that contains your class linha thus:

.linha:hover .saiba_mais {
  display: block;
}

To the edge, you lay border: none; not to appear the edge on the class linha, and in linha:hover that you will insert the border you want when passing with the mouse.

Concluding his CSS will look like this:

.saiba_mais {
    display: none;
}

.linha:hover .saiba_mais {
    display: block;
}

.linha{
   border: none;
   height: 390px;
 }

.linha:hover {
    border: 1px solid #E0E0DA;
}

.descricao_produto{
    color:black;
    font-weight: 700;
}

.preco{
    color:red;
}

This way you can discard the tag <a> and the code in JS that will no longer be necessary.