How to expand an image with Hover without other elements moving

Asked

Viewed 947 times

1

would like to expand an image when passing 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

2 answers

2

One of the ways to do this would be to define 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">
<img src="http://img.ibxk.com.br/2014/03/18/18154237231274-t100x100.jpg">
<img src="http://img.ibxk.com.br/2014/03/18/18154237231274-t100x100.jpg">

Thus the standard element margin has 1/4 of the size o width and height when expanded. While expanded you will have the margin of 0.

2


You can use the property transform with scale(largura, altura) alternatively:

It resizes the element according to a scale, and it does not move others close 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>

        <li id ="imagem2"><a href="">
            <a href="#"><img src="http://placehold.it/100x100"></a>
        </li>

        <li id ="imagem3"><a href="">
            <a href="#"><img src="http://placehold.it/100x100"></a>
        </li>

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

  • I hadn’t really thought about it, it’s a really good method.

  • What can be problematic is that because images with different sizes will give a strange effect, expanding more or less than the others. E it would be necessary to work with the margins or overflow to not let the images exceed the screen, but in both ways this is necessary.

Browser other questions tagged html css

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