GDIDPB

Galeria de imagens deslizantes para blogger

by Mairink Oemes

HTML

<div class="image-box-wrapper" id="image-box-wrapper">

    <!-- `.imagem start-box  -->
    <div class="image-box">
        <div class="image-container">
            <img src="https://lh5.googleusercontent.com/-

PJAA5_R2RZU/VAUBJmxxqgI/AAAAAAAAGeo/tsGDKWBrGdQ/w320-h200-no/European%2BRobin%2B

%28Erithacus%2Brubecula%29.jpg" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Pisco-de-peito-ruivo</h4>
                <p>Pequena ave que se conhece bem 
pela mancha alaranjada que lhe ornamenta o peito. ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="https://lh3.googleusercontent.com/-g-C_4k7rU-

A/VAUBecy9HvI/AAAAAAAAGfE/a7pngjF3SF0/w320-h200-no/Pedraforca%2C%2BNature%2BPark

%2BCad%C3%AD-Moixer%C3%B3.jpg" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Pedraforca</h4>
                <p>Pedraforca é uma das montanhas mais emblemáticas da Catalunha ( 

Espanha ). ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="https://lh5.googleusercontent.com/-

tC3EO3N9Z0U/VAUCiNPn3aI/AAAAAAAAGfk/Zb_w6wT7gsk/w320-h200-no/Serra%2Be%2Bpico

%2BDedo%2Bde%2BDeus%2Bno%2BParque%2BNacional%2Bda%2BSerra%2Bdos%2B%C3%93rg

%C3%A3os.jpg" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Serra e pico Dedo de Deus</h4>
                <p>Dedo de Deus é um pico com 1 692 metros de altitude e cujo 

contorno se assemelha a uma mão apontando o dedo indicador para o céu. ...</p>
                <p><a class="mais" href="URL">mais</a></p>
         ...

CSS

* {
  margin:0;
  padding:0;
}

body {background-color:#f5f5f5}

.image-box-wrapper {
  width:642px;
  margin:50px auto;
}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.image-container,
.image-details {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}

.image-container img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;
}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;
}

.image-details h4 {
  font-size:120%;
  height:auto;
}

.image-details .details {
  padding:10px 12px;
  overflow:hidden;
}

.image-details .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;
}

.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}

JavaScript

<div class="image-box-wrapper" id="image-box-wrapper">

    <!-- `.imagem start-box  -->
    <div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
                <p>Descrição do texto ...</p>
                <p><a class="mais" href="URL">mais</a></p>
            </div>
        </div>
    </div>
<div class="image-box">
        <div class="image-container">
            <img src="URL DA IMAGEM" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Descrição Título</h4>
         ...