Galería imágenes puro Css

by kseso

HTML

<ul class="ejemplo">
    <li>
      <a href="#"><img src="https://lh4.googleusercontent.com/-3QNEIgX3Gv4/UCPyLTtnmHI/AAAAAAAAEDY/KGb0eEM9GZo/s500/fuerzas-naturaleza.jpg"/>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor nunc non augue ullamcorper ac vestibulum tortor placerat.</span></a>
    </li>
    <li>
      <a href="#"><img src="https://lh5.googleusercontent.com/-KijskybjlCc/UCPyNCwVxPI/AAAAAAAAEDg/8AwgBhZyhG4/s500/fuerzas-naturaleza2.jpg"/>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor nunc non augue ullamcorper ac vestibulum tortor placerat.</span></a>
    </li>
    <li>
      <a href="#"><img src="https://lh5.googleusercontent.com/-uGIMoR677PM/UCPyOBjNWVI/AAAAAAAAEDo/XE73W5FQW-c/s500/fuerzas-naturaleza3.jpg"/>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor nunc non augue ullamcorper ac vestibulum tortor placerat.</span></a>
    </li>
    <li>
      <a href="#"><img src="https://lh6.googleusercontent.com/-GDqYlSghXYQ/UCPyRihM0WI/AAAAAAAAED4/UCi0IPMlg-8/s500/fuerzas-naturaleza5.jpg"/>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor nunc non augue ullamcorper ac vestibulum tortor placerat.</span></a>
    </li>
    <li>
      <a href="#"><img src="https://lh5.googleusercontent.com/-nbNq900tVT4/UCPyQeZkP_I/AAAAAAAAEDw/WsBQhD2Da-o/s500/fuerzas-naturaleza4.jpg"/>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor nunc non augue ullamcorper ac vestibulum tortor placerat.</span></a>
    </li>
    <li>
      <a href="#"><img src="https://lh6.googleusercontent.com/-VZhSlWvxlOA/UCPyXu9UgCI/AAAAAAAAEEI/yB-R1R0WM4M/s720/fuerzas-naturaleza6.jpg"/>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor nunc non augue ullamcorper ac vestibulum tortor placerat.</span></a>
    </li>
    <li>
      <a href="#"><img...

CSS

* {
  border: 0 none;
    margin: 0;
    padding: 0;
  position: relative; 
}
html {background: #000;}
ul {
    list-style-type: none;
  width: 910px;
  height: 300px;
  margin: 20px auto;
  overflow: hidden;
}
li {
  width: 130px;
  height: 300px; 
    float: left;
  -webkit-transition: .7s;
  -moz-transition: .7s;
  -o-transition:  .7s;
  -ms-transition:  .7s;
  transition: .7s;
}
li a {
  display: block;
  width:auto;
  height: auto;
    overflow: hidden;
  text-decoration: none; 
}
ul:hover li {width: 70px;}
ul:hover li:hover {
width: 490px;
}
li span {
position:absolute;
opacity:0;
top:-80px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
background: rgba(0,0,0,.25);
padding:10px;
margin: 0 5px;
color: rgba(255,255,255,.3);
-webkit-transition: .9s .3s;
-moz-transition: .9s .3s;
-o-transition: .9s .3s;
-ms-transition: .9s .3s;
transition: .9s .3s;
}
li:hover span {
opacity:1;
top: 230px;
}
span:hover {
  background: rgba(0,0,0,.7);
  color: rgba(146,173,232,.7);  
}