HTML y CSS básicos para las transiciones

HTML y CSS básicos para las transiciones
  • Eborio Linárez
  • November 18, 2012
  • 0

Para comenzar el tutorial debemos crear el HTML y CSS básico para realizar las transiciones. En algunos ejemplos el HTML que crearemos en este post será modificado para lograr el efecto deseado sobre la imagen, pero en la mayoría de ejemplos utilizaremos exactamente el mismo.

HTML

El HTML a utilizar en la mayoría de los ejemplos es el siguiente.

<div class="view">  
    <img src="/img/pagani-huayra.jpg" class="img-responsive">  
    <div class="mask">  
        <h2>Título</h2>  
        <p>
            Texto.
        </p>  
        <a href="#" class="info">Leer Más</a>  
    </div>  
</div>

Ten en cuenta que es solo un fragmento que será utilizado dentro de una columna de Bootstrap. Para mayor detalle del HTML y como está conformado puedes ir al código del ejemplo en el repositorio de GitHub el cual encontrarás en los enlaces de interés al final del post.

CSS

Todos los ejemplos utilizarán un CSS común que servirá como base para la disposición de los elementos a utilizar (imagen, máscaras, textos, botones).

.view {
    width: 350px;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
}
.view .mask, .view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: hsla(0,0%,0%,0.8);
    margin: 20px 0 0 0;
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

Con esto ya tenemos la base para comenzar a realizar los ejemplos del tutorial. Espero te interese y sigas el resto de las publicaciones. También te agradezco lo compartas en las redes sociales.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario