Portfolio Hover Effects In Pure CSS/CSS3

Category: Animation , CSS & CSS3 | October 31, 2018
Author:eisenfox
Views Total:1,910 views
Official Page:Go to website
Last Update:October 31, 2018
License:MIT

Preview:

Portfolio Hover Effects In Pure CSS/CSS3

Description:

A set of 5 modern, smooth image hover effects for portfolio items. Based on pure CSS/CSS3.

How to use it:

Load the Material Icons in the document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">

Load the main stylesheet in the header.

<link rel="stylesheet" href="css/style.css">

Create the HTML for the portfolio.

<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>

You Might Be Interested In:


Leave a Reply