Turn vertical gallery to horizontal

Asked

Viewed 816 times

3

I have a vertical gallery and I would like to lay it horizontal, as 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

  • Post your HTML too

  • Your code is weird. You set a small height and width for the #gallery and even set as overflow: hidden;... The #gallery shouldn’t be width: 100%; height: auto;?

  • What have you tried? In the American Ovreflow Stack have a dozen of these questions.

  • You can add in #gallery li {display:inline} and take out the display:block #gallery li a, It won’t get 100% yet but... I think it should be something like that you’d like, wouldn’t you? I’d take the :Hover to enlarge the image and make events. on('click') jquery to open in a modal the larger image... I think it would bring a better user experience;

  • @Rafael Withoeft Put here the code you would change.

  • @Catarinasilvestre you use bootstrap?

  • @Catarinasilvestre do you really need to increase the image by hovering the mouse? and this link there in the tag a, would represent the album something like that? could be taken out and placed elsewhere for example?

  • Use #Gallerry ul li{display:inline; float:left}

Show 3 more comments

2 answers

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>

1

I’ve set up a more responsive way for your model. Instead of setting the image size, there is a "cut" of them, so they do not get distorted.

I used images examples. The way it is just put your min-width desired in the div#gaalleryBox (div on what is yours ul#gallery) and all other elements will suit.

Like the width is at 100% it will be the full screen size 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><a href="vida.html"><img src="http://goo.gl/ggDsri"></a></li>
    <li><a href="vida.html"><img src="http://goo.gl/PA6N6T"></a></li>
    <li><a href="vida.html"><img src="http://goo.gl/nNv21c"></a></li>
  </ul>
</div>

Browser other questions tagged css

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