Hover with border and CSS image

Question

Hover with border and CSS image

Asked 7 years ago

Viewed 943 times

0

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>

2 answers

2

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>

Dvd occurred a problem when placing the code you posted the width of the Learn button decreases further and did not occupy the maximum border width

– User1999

2017/10/23 at 03:41
@User1999 My code was just an example. You must adapt in your code.

– Sam

2017/10/23 at 03:42
@User1999 Strip the padding: 10px;.

– Sam

2017/10/23 at 03:43
but then pq in class . saiba_more{ background-color: #00008B; color: white; padding: 16px; font-size: 13px; border: None; width: 100%; margin-top: 20px; } I put width 100% but did not occupy the full border width

– User1999

2017/10/23 at 03:43
@User1999 Because of the padding.. I put it as an example, you can take it.

– Sam

2017/10/23 at 03:44
i drew . line { border: 1px Solid #fff; height: 390px; display: inline-block; }

– User1999

2017/10/23 at 03:44
but still the button did not fill the space

– User1999

2017/10/23 at 03:45
@User1999 Other than that, the rest was good?

– Sam

2017/10/23 at 03:48
yes DVD worked properly thank you

– User1999

2017/10/23 at 03:51
@User1999 So let’s see the button throw?

– Sam

2017/10/23 at 03:51
Come on, watch this thing

– User1999

2017/10/23 at 03:52
@User1999 Vc must be using bootstrap neh?

– Sam

2017/10/23 at 03:52
yes, I’m using

– User1999

2017/10/23 at 03:53
@User1999 I needed to see a print of how it is and the HTML code of it.. is because the code of your question cannot reproduce exactly the HTML... does not have the class of this button etc

– Sam

2017/10/23 at 03:59
I managed to get here rs vlw

– User1999

2017/10/23 at 04:02
@User1999 Blz dude! Abs!

– Sam

2017/10/23 at 04:02

Show 11 more comments

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.

by Fernando VR • **941** points · Answer 1 · 2017-10-22T05:46:36+00:00

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.