Expanding an image with hover without the other elements moving

Question

Expanding an image with hover without the other elements moving

Navigation

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

1

I would like to expand an image when hovering the mouse without the others moving.

nav#foto ul li{
	
	display:inline-block;
	margin-left:30px;
	margin-top:55px;
	text-align: center;
	box-shadow: 2px 2px 10px rgba(0,0,0,.3);
    background-color:rgb(248,248,248);

	
	}

	nav#foto li:hover{
	
		width:50px;
	    height:40px;
		background:white;
		box-shadow: 2px 2px 20px rgba(0,0,0,.5);
		
	}

<nav id="foto">
<ul>
<li id ="imagem1"><a href=""><img src="foto/foto1.jpeg"></a></li>
<li id ="imagem2"><a href=""><img src="foto/foto2.jpeg"></a></li>
<li id ="imagem3"><a href=""><img src="foto/foto3.jpeg"></a></li>
<li id ="imagem4"><a href=""><img src="foto/foto4.jpeg"></a></li>



</ul>
</nav>

html css

asked by anonymous 26.01.2017 / 14:59

2 answers

2

One of the ways to do this would be to set a margin equivalent to width/height when the element is expanded.

For example:

/* Padrão */
img {
  float: left;
  display: block;
  margin: 25px;
  width: 50px;
  height: 50px;
}
/* Expandido */
img:hover {
  width: 100px;
  height: 100px;
  margin: 0;
}

<img src="http://img.ibxk.com.br/2014/03/18/18154237231274-t100x100.jpg"><imgsrc="http://img.ibxk.com.br/2014/03/18/18154237231274-t100x100.jpg"><imgsrc="http://img.ibxk.com.br/2014/03/18/18154237231274-t100x100.jpg">

In this way the default element margin is 1/4 of the size width and height when expanded. While the expanded will have margin of 0 .

26.01.2017 / 15:54

Count elements and display an amount How to convert numeric value to boolean?

score 2 · Accepted Answer

You can use the transform property with scale(largura, altura) as an alternative:

It resizes the element according to a scale, and it does not move the others next to it.

nav#foto ul li{
    display:inline-block;
    margin-left:30px;
    margin-top:55px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,.3);
    background-color:rgb(248,248,248);
}

nav#foto li:hover {
    transform: scale(2, 2);
    background:white;
    box-shadow: 2px 2px 20px rgba(0,0,0,.5);
}

<nav id="foto">
    <ul>
        <li id ="imagem1"><a href="">
            <a href="#"><img src="http://placehold.it/100x100"></a></li><liid="imagem2"><a href="">
            <a href="#"><img src="http://placehold.it/100x100"></a></li><liid="imagem3"><a href="">
            <a href="#"><img src="http://placehold.it/100x100"></a></li><liid="imagem4"><a href="">
            <a href="#"><img src="http://placehold.it/100x100"></a>
        </li>
    </ul>
</nav>