Efectos Hover de portafolio en Pure CSS/CSS3
| Autor: | eisenfox |
|---|---|
| Views Total: | 768 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 31, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un conjunto de 5 modernos y suaves efectos de desplazamiento de imagen para los elementos del portafolio. Basado en CSS/CSS3 puro.
Funcionamiento
Cargue los iconos de material en el documento.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
Cargue la hoja de estilo principal en el encabezado.
<link rel="stylesheet" href="css/style.css">
Cree el código HTML para la cartera.
<div class="portfolio-item portfolio-effect__item portfolio-item--eff1"> <img class="portfolio-item__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-28.jpg" alt="Portfolio Item" width="826" height="551"> <div class="portfolio-item__info"> <h3 class="portfolio-item__header">Web Development</h3> <div class="portfolio-item__links"> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">link</i> </a> </div> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">search</i> </a> </div> </div> </div> </div> <div class="portfolio-item portfolio-effect__item portfolio-item--eff2"> <img class="portfolio-item__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-5.jpg" alt="Portfolio Item" width="826" height="551"> <div class="portfolio-item__info"> <h3 class="portfolio-item__header">Web Development</h3> <div class="portfolio-item__links"> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">link</i> </a> </div> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">search</i> </a> </div> </div> </div> </div> <div class="portfolio-item portfolio-effect__item portfolio-item--eff3"> <img class="portfolio-item__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-13.jpg" alt="Portfolio Item" width="826" height="551"> <div class="portfolio-item__info"> <h3 class="portfolio-item__header">Web Development</h3> <div class="portfolio-item__links"> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">link</i> </a> </div> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">search</i> </a> </div> </div> </div> </div> <div class="portfolio-item portfolio-effect__item portfolio-item--eff4"> <img class="portfolio-item__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-22.jpg" alt="Portfolio Item" width="826" height="551"> <div class="portfolio-item__info"> <h3 class="portfolio-item__header">Web Development</h3> <div class="portfolio-item__links"> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">link</i> </a> </div> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">search</i> </a> </div> </div> </div> </div> <div class="portfolio-item portfolio-effect__item portfolio-item--eff5"> <img class="portfolio-item__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-31.jpg" alt="Portfolio Item" width="826" height="551"> <div class="portfolio-item__info"> <h3 class="portfolio-item__header">Web Development</h3> <div class="portfolio-item__links"> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">link</i> </a> </div> <div class="portfolio-item__link-block"> <a class="portfolio-item__link" href="#" title="Link Title"> <i class="material-icons">search</i> </a> </div> </div> </div> </div>
