Turn vertical gallery horizontally

Question

Turn vertical gallery horizontally

Navigation

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

3

I have a vertical gallery and I like to put it horizontally, how do I do it?

#gallery {
  padding:0; 
  margin:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:320px; 
  height:425px; 
  border:1px solid #888; 
  background:#ffffff;
}
#gallery li {
  float:left;
}
#gallery li a {
  display:block; 
  height:30px;
  width:320px; 
  float:left; 
  text-decoration:none; 
  border-bottom:1px solid #fff; 
  cursor:default;
}
#gallery li a img {
  width:320px; 
  height:30px; 
  border:0;
}
#gallery li a:hover {
  background:#eee; 
  height:239px;
}
#gallery li a:hover img {
  height:239px;
}

<div>
  <ul id="gallery">
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/ferandomae.png"></a></li>
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/187.png"></a></li>
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/pessoa-10-anos.jpg"></a></li>
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/Pessoa_1894.gif"></a></li>
  </ul>
</div>

css

asked by anonymous 03.03.2015 / 12:34

2 answers

String corresponding to real number How to send data through the soapUI tool and how to do manual? [closed]

score 1 · Answer 1

Just set the width of the #gallery to 1280px (320px each image x 4 images) and set the height to be the same as the images when they are in: hover.

#gallery {
  padding:0; 
  margin:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:1280px; 
  height:239px; 
  border:1px solid #888; 
  background:#ffffff;
}
#gallery li {
  float:left;
}
#gallery li a {
  display:block; 
  height:30px;
  width:320px; 
  float:left; 
  text-decoration:none; 
  border-bottom:1px solid #fff; 
  cursor:default;
}
#gallery li a img {
  width:320px; 
  height:30px; 
  border:0;
}
#gallery li a:hover {
  background:#eee; 
  height:239px;
}
#gallery li a:hover img {
  height:239px;
}

<div>
  <ul id="gallery">
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/ferandomae.png"></a></li>
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/187.png"></a></li>
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/pessoa-10-anos.jpg"></a></li>
    <li><a href="vida.html"><img src="imagens/Pessoa/Galeria/Pessoa_1894.gif"></a></li>
  </ul>
</div>

score 1 · Answer 2

Elabourei a more responsive way to your model. Instead of setting the image size, there is a "cut" of them so they do not get distorted.

I used sample images. So it is enough if you put your desired min-width in div#gaalleryBox (div where your ul#gallery is) and all other elements will fit.

Since width is at 100%, it will be the total size of the screen initially.

#galleryBox{
  width:100%; 
  height:auto; 
  /* min-width: 500px; Mude para o que você deseja */
}
#gallery {
  padding:0; 
  margin:0; 
  width:100%; 
  border:1px solid #888; 
  background:#ffffff;
}
#gallery li {
  display: inline;
  list-style: none;
  float:left;
  width: 25%;
}
#gallery li a{
  display: inline-block;
  height:30px;
  width: 100%; 
  float:left; 
  text-decoration:none; 
  border-bottom:1px solid #fff; 
  cursor:default;
  overflow: hidden;  
  transition: all 0.1s ease;
}
#gallery li a img {
  width:100%; 
  height:auto; 
  border:0;
  display: inline-block;
  margin-top: -30%;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;


}
#gallery li a:hover {
  background:#eee; 
  height:auto;
}
#gallery li a:hover img{
  margin-top: 0;
}

<div id="galleryBox">
  <ul id="gallery">
    <li><a href="vida.html"><img src="http://goo.gl/T3W9x1"></a></li><li><ahref="vida.html"><img src="http://goo.gl/ggDsri"></a></li><li><ahref="vida.html"><img src="http://goo.gl/PA6N6T"></a></li><li><ahref="vida.html"><img src="http://goo.gl/nNv21c"></a></li>
  </ul>
</div>