Hover with border and CSS image

Question

Hover with border and CSS image

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I'm developing a web application and would like that when I did not hover over the image, I would only see the image on the screen, without the description of the product, the price and the border around it.

Image without hover effect.

AndwhenIhoverovertheimageIwouldliketheimagetobeborderedbytheborderandtheproductdescription,priceandtheLearnmorebuttonappear.

Imagewithhover

HTML

<divclass="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>

html html5 css css3

asked by anonymous 22.10.2017 / 06:37

2 answers

0

Hide the item that contains class saiba_mais like this:

.saiba_mais {
  display: none;
}

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

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

For the border, you put border: none; to not show the border in class linha , and in linha:hover you will insert the border you want when passing with the mouse

Completing your 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;
}

In this way you can discard the <a> tag and the JS tag that will no longer be necessary.

22.10.2017 / 07:46

Doubt Gem Devise Keyframes is not recognizing the command

score 2 · Accepted Answer

You can do this without using JavaScript, just 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>