Portfolio Hover Effects In Pure CSS/CSS3

Preview:

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>