CSS3 Hover Effects (Intermediate Pack)
Made by Natali Davydova

Features

Effect #1
Effect #1

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-1">
  <img src="img/ef1.jpg" alt="Effect #1" /> 
  <div class="overlay"> 
    <div class="circle-with-icon"> 
      <div class="circ left-circ"></div>
      <div class="circ top-circ"></div> 
      <div class="circ right-circ"></div> 
      <div class="circ bottom-circ"></div> 
      <div class="icon"></div> 
    </div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                 
                
.eff-1 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-1 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-1 .overlay {
  width: 180px;
  height: 120px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 90px;
  left: 60px;
  -moz-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
  -webkit-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
  -o-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
  -ms-transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
  transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s;
}

.eff-1 .overlay .circ {
  width: 80px;
  height: 80px;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}

.eff-1 .overlay .left-circ {
  border-left: 2px solid black;
  -o-transition: all 0.15s linear 0.3s;
  -ms-transition: all 0.15s linear 0.3s;
  -moz-transition: all 0.15s linear 0.3s;
  -webkit-transition: all 0.15s linear 0.3s;
  transition: all 0.15s linear 0.3s;
}

.eff-1 .overlay .top-circ {
  width: 82px;
  border-top: 2px solid black;
  -moz-transition: all 0.15s linear 0.2s;
  -o-transition: all 0.15s linear 0.2s;
  -ms-transition: all 0.15s linear 0.2s;
  -webkit-transition: all 0.15s linear 0.2s;
  transition: all 0.15s linear 0.2s;
}

.eff-1 .overlay .right-circ {
  border-right: 2px solid black;
  -moz-transition: all 0.15s linear 0.1s;
  -o-transition: all 0.15s linear 0.1s;
  -ms-transition: all 0.15s linear 0.1s;
  -webkit-transition: all 0.15s linear 0.1s;
  transition: all 0.15s linear 0.1s;
}

.eff-1 .overlay .bottom-circ {
  width: 82px;
  border-bottom: 2px solid black;
  -moz-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-1 .overlay .circle-with-icon {
  width: 82px;
  height: 82px;
  margin: auto;
  position: relative;
  top: 19px;
  -moz-transition: transform 0.4s linear 0s;
  -ms-transition: transform 0.4s linear 0s;
  -webkit-transition: transform 0.4s linear 0s;
  -o-transition: transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s;
}

.eff-1 .circle-with-icon .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 31px;
  left: 24px;
}

.eff-1 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-1 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-1 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-1 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-1 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-1:hover .circle-with-icon {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.eff-1:hover .overlay .circ {
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.eff-1:hover .overlay {
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  -o-transform: scale(5);
  -webkit-transform: scale(5);
  transform: scale(5);
  opacity: 0;
  -webkit-transition-delay: 0.55s;
  -moz-transition-delay: 0.55s;
  -o-transition-delay: 0.55s;
  -ms-transition-delay: 0.55s;
  transition-delay: 0.55s;
}

.eff-1:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0.85s;
  -ms-transition-delay: 0.85s;
  -o-transition-delay: 0.85s;
  -webkit-transition-delay: 0.85s;
  transition-delay: 0.85s;
}                  
                
Effect #2
Effect #2

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-2"> 
  <img src="img/ef2.jpg" alt="Effect #2" /> 
  <div class="overlay"> 
    <div class="circle-with-icon"> 
      <div class="circ left-circ"></div> 
      <div class="circ top-circ"></div> 
      <div class="circ right-circ"></div> 
      <div class="circ bottom-circ"></div> 
      <div class="icon"></div> 
    </div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-2 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-2 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-2 .overlay {
  width: 180px;
  height: 120px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 90px;
  left: 60px;
  -moz-transition: all 0.2s linear 0.55s;
  -o-transition: all 0.2s linear 0.55s;
  -ms-transition: all 0.2s linear 0.55s;
  -webkit-transition: all 0.2s linear 0.55s;
  transition: all 0.2s linear 0.55s;
}

.eff-2 .overlay .circ {
  width: 80px;
  height: 80px;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}

.eff-2 .overlay .left-circ {
  border-left: 2px solid black;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-2 .overlay .top-circ {
  width: 82px;
  border-top: 2px solid black;
  -moz-transition: all 0.2s linear 0.1s;
  -ms-transition: all 0.2s linear 0.1s;
  -o-transition: all 0.2s linear 0.1s;
  -webkit-transition: all 0.2s linear 0.1s;
  transition: all 0.2s linear 0.1s;
}

.eff-2 .overlay .right-circ {
  border-right: 2px solid black;
  -moz-transition: all 0.2s linear 0.2s;
  -o-transition: all 0.2s linear 0.2s;
  -ms-transition: all 0.2s linear 0.2s;
  -webkit-transition: all 0.2s linear 0.2s;
  transition: all 0.2s linear 0.2s;
}

.eff-2 .overlay .bottom-circ {
  width: 82px;
  border-bottom: 2px solid black;
  -moz-transition: all 0.2s linear 0.3s;
  -o-transition: all 0.2s linear 0.3s;
  -ms-transition: all 0.2s linear 0.3s;
  -webkit-transition: all 0.2s linear 0.3s;
  transition: all 0.2s linear 0.3s;
}

.eff-2 .overlay .circle-with-icon {
  width: 82px;
  height: 82px;
  margin: auto;
  position: relative;
  top: 19px;
  opacity: 1;
  -moz-transition: all 0.2s linear 0.8s;
  -o-transition: all 0.2s linear 0.8s;
  -ms-transition: all 0.2s linear 0.8s;
  -webkit-transition: all 0.2s linear 0.8s;
  transition: all 0.2s linear 0.8s;
}

.eff-2 .circle-with-icon .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 31px;
  left: 24px;
}

.eff-2 .caption {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-2 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-2 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-2 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-2 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-2:hover .overlay .circ {
  border-radius: 0px;
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.eff-2:hover .overlay .circle-with-icon {
  opacity: 0;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-2:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.eff-2:hover .caption {
  left: 0px;
  -moz-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}                  
                
Effect #3
Effect #3

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-3"> 
  <img src="img/ef3.jpg" alt="Effect #3" /> 
  <div class="overlay"> 
    <div class="circle-with-icon"> 
      <div class="circ left-circ"></div> 
      <div class="circ top-circ"></div> 
      <div class="circ right-circ"></div> 
      <div class="circ bottom-circ"></div> 
      <div class="icon"></div> 
    </div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-3 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-3 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-3 .overlay {
  width: 180px;
  height: 120px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 90px;
  left: 60px;
  -moz-transition: all 0.2s linear 0.65s;
  -o-transition: all 0.2s linear 0.65s;
  -ms-transition: all 0.2s linear 0.65s;
  -webkit-transition: all 0.2s linear 0.65s;
  transition: all 0.2s linear 0.65s;
}

.eff-3 .overlay .circ {
  width: 80px;
  height: 80px;
  border-radius: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: transparent;
}

.eff-3 .overlay .left-circ {
  border-left: 2px solid black;
  -moz-transition: border-color 0.3s linear 0s;
  -o-transition: border-color 0.3s linear 0s;
  -ms-transition: border-color 0.3s linear 0s;
  -webkit-transition: border-color 0.3s linear 0s;
  transition: border-color 0.3s linear 0s;
}

.eff-3 .overlay .top-circ {
  width: 82px;
  border-top: 2px solid black;
  -moz-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -o-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -ms-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -webkit-transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
}

.eff-3 .overlay .right-circ {
  border-right: 2px solid black;
  -moz-transition: border-color 0.3s linear 0s;
  -o-transition: border-color 0.3s linear 0s;
  -ms-transition: border-color 0.3s linear 0s;
  -webkit-transition: border-color 0.3s linear 0s;
  transition: border-color 0.3s linear 0s;
}

.eff-3 .overlay .bottom-circ {
  width: 82px;
  border-bottom: 2px solid black;
  -moz-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -o-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -ms-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -webkit-transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
}

.eff-3 .overlay .circle-with-icon {
  width: 82px;
  height: 82px;
  margin: auto;
  position: relative;
  top: 19px;
  opacity: 1;
}

.eff-3 .circle-with-icon .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 31px;
  left: 24px;
  -moz-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -o-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -ms-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  -webkit-transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
  transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s;
}

.eff-3 .caption {
  position: absolute;
  top: -100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-3 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-3 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-3 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-3 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-3:hover .overlay .left-circ,
.eff-3:hover .overlay .right-circ {
  border-color: transparent;
}

.eff-3:hover .overlay .top-circ,
.eff-3:hover .overlay .bottom-circ {
  border-radius: 0px;
  left: 500%;
  opacity: 0;
}

.eff-3:hover .overlay .top-circ {
  top: 93%;
}

.eff-3:hover .circle-with-icon .icon {
  left: -500%;
  opacity: 0;
}

.eff-3:hover .overlay {
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.eff-3:hover .caption {
  top: 0px;
  -moz-transition-delay: 0.75s;
  -o-transition-delay: 0.75s;
  -ms-transition-delay: 0.75s;
  -webkit-transition-delay: 0.75s;
  transition-delay: 0.75s;
}                  
                
Effect #4
Effect #4

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-4"> 
  <img src="img/ef4.jpg" alt="Effect #4" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
    <div class="borders"> 
      <div class="border border-top"></div> 
      <div class="border border-right"></div> 
      <div class="border border-bottom"></div> 
      <div class="border border-left"></div> 
    </div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-4 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-4 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-4 .overlay {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 120px;
  left: 120px;
  -moz-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-4 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 18px;
  left: 13px;
  opacity: 1;
  -moz-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-4 .borders {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  opacity: 0;
  -moz-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-4 .border {
  background: black;
  position: absolute;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-4 .border-top {
  height: 2px;
  width: 0px;
  top: 0px;
  left: 0px;
}

.eff-4 .border-right {
  height: 0px;
  width: 2px;
  top: 2px;
  right: 0px;
}

.eff-4 .border-bottom {
  height: 2px;
  width: 0px;
  bottom: 0px;
  right: 2px;
}

.eff-4 .border-left {
  height: 0px;
  width: 2px;
  bottom: 2px;
  left: 0px;
}

.eff-4 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-4 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-4 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-4 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-4 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  opacity: 0;
  text-decoration: none;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-4:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.eff-4:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-4:hover .border-top {
  width: 100%;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-4:hover .border-right {
  height: 100%;
  max-height: -moz-calc(100% - 2px);
  max-height: -o-calc(100% - 2px);
  max-height: -webkit-calc(100% - 2px);
  max-height: -ms-calc(100% - 2px);
  max-height: calc(100% - 2px);
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-4:hover .border-bottom {
  width: 100%;
  -max-width: -moz-calc(100% - 2px);
  -max-width: -o-calc(100% - 2px);
  -max-width: -ms-calc(100% - 2px);
  -max-width: -webkit-calc(100% - 2px);
  -max-width: calc(100% - 2px);
  -moz-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  -ms-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.eff-4:hover .border-left {
  height: 100%;
  max-height: -moz-calc(100% - 4px);
  max-height: -o-calc(100% - 4px);
  max-height: -webkit-calc(100% - 4px);
  max-height: -ms-calc(100% - 4px);
  max-height: calc(100% - 4px);
  -moz-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  -ms-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.eff-4:hover .borders {
  opacity: 1;
}

.eff-4:hover .caption h4,
.eff-4:hover .caption p,
.eff-4:hover .caption a {
  opacity: 1;
}

.eff-4:hover .caption h4 {
  -moz-transition-delay: 0.65s;
  -o-transition-delay: 0.65s;
  -ms-transition-delay: 0.65s;
  -webkit-transition-delay: 0.65s;
  transition-delay: 0.65s;
}

.eff-4:hover .caption p {
  -moz-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

.eff-4:hover .caption a {
  -moz-transition-delay: 0.75s;
  -o-transition-delay: 0.75s;
  -ms-transition-delay: 0.75s;
  -webkit-transition-delay: 0.75s;
  transition-delay: 0.75s;
}
                
Effect #5
Effect #5

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-5"> 
  <img src="img/ef5.jpg" alt="Effect #5" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
    <div class="borders"> 
      <div class="border border-top"></div> 
      <div class="border border-right"></div> 
      <div class="border border-bottom"></div> 
      <div class="border border-left"></div> 
    </div> 
    <div class="borders-small"> 
      <div class="border border-top"></div> 
      <div class="border border-right"></div> 
      <div class="border border-bottom"></div> 
      <div class="border border-left"></div> 
    </div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-5 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-5 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-5 .overlay {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 120px;
  left: 120px;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-5 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 18px;
  left: 13px;
  opacity: 1;
  -moz-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-5 .borders {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  opacity: 0;
  -moz-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-5 .borders-small {
  width: 88%;
  height: 88%;
  position: absolute;
  top: 6%;
  left: 6%;
  opacity: 0;
  -moz-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-5 .border {
  background: black;
  position: absolute;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-5 .borders .border-top {
  top: 0px;
  left: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders .border-left {
  top: 0px;
  left: 0px;
  width: 2px;
  height: 0px;
}

.eff-5 .borders .border-bottom {
  bottom: 0px;
  right: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders .border-right {
  bottom: 0px;
  right: 0px;
  width: 2px;
  height: 0px;
}

.eff-5 .borders-small .border-top {
  top: 0px;
  right: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders-small .border-left {
  bottom: 0px;
  left: 0px;
  width: 2px;
  height: 0px;
}

.eff-5 .borders-small .border-bottom {
  bottom: 0px;
  left: 0px;
  width: 0px;
  height: 2px;
}

.eff-5 .borders-small .border-right {
  top: 0px;
  right: 0px;
  width: 2px;
  height: 0px;
}

.eff-5:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.eff-5 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-5 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-5 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-5 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-5 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-5:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-5:hover .borders,
.eff-5:hover .borders-small {
  opacity: 1;
}

.eff-5:hover .border-top,
.eff-5:hover .border-bottom {
  width: 100%;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-5:hover .border-left,
.eff-5:hover .border-right {
  height: 100%;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-5:hover .caption h4,
.eff-5:hover .caption p,
.eff-5:hover .caption a {
  opacity: 1;
}

.eff-5:hover .caption h4 {
  -moz-transition-delay: 0.75s;
  -webkit-transition-delay: 0.75s;
  -ms-transition-delay: 0.75s;
  -o-transition-delay: 0.75s;
  transition-delay: 0.75s;
}

.eff-5:hover .caption p {
  -moz-transition-delay: 0.65s;
  -webkit-transition-delay: 0.65s;
  -ms-transition-delay: 0.65s;
  -o-transition-delay: 0.65s;
  transition-delay: 0.65s;
}

.eff-5:hover .caption a {
  -moz-transition-delay: 0.55s;
  -webkit-transition-delay: 0.55s;
  -ms-transition-delay: 0.55s;
  -o-transition-delay: 0.55s;
  transition-delay: 0.55s;
}                  
                
Effect #6
Effect #6

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-6"> 
  <img src="img/ef6.jpg" alt="Effect #6" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
    <div class="borders"> 
      <div class="border border-top"></div> 
      <div class="border border-right"></div> 
      <div class="border border-bottom"></div> 
      <div class="border border-left"></div> 
    </div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-6 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-6 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-6 .overlay {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 120px;
  left: 120px;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-6 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 18px;
  left: 13px;
  opacity: 1;
  -moz-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-6 .borders {
  width: 90%;
  height: 90%;
  position: absolute;
  top: 5%;
  left: 5%;
  opacity: 0;
  -moz-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-6 .border {
  background: black;
  position: absolute;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  -ms-transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
}

.eff-6 .border-top {
  top: 0px;
  left: 2px;
  width: 100%;
  height: 2px;
  -moz-transform-origin: left top;
  -o-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.eff-6 .border-left {
  bottom: 0px;
  left: 0px;
  width: 2px;
  height: 100%;
  -moz-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  -o-transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

.eff-6 .border-bottom {
  bottom: 0px;
  right: 2px;
  width: 100%;
  height: 2px;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

.eff-6 .border-right {
  top: 0px;
  right: 0px;
  width: 2px;
  height: 100%;
  -moz-transform-origin: right top;
  -o-transform-origin: right top;
  -ms-transform-origin: right top;
  -webkit-transform-origin: right top;
  transform-origin: right top;
}

.eff-6 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-6 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-6 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-6 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-6 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-6:hover .overlay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.eff-6:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-6:hover .borders {
  opacity: 1;
}

.eff-6:hover .border-top,
.eff-6:hover .border-left,
.eff-6:hover .border-bottom,
.eff-6:hover .border-right {
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-6:hover .caption {
  opacity: 1;
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-delay: 0.65s;
  -ms-transition-delay: 0.65s;
  -webkit-transition-delay: 0.65s;
  -o-transition-delay: 0.65s;
  transition-delay: 0.65s;
}                  
                
Effect #7
Effect #7
Effect #7
Effect #7
Effect #7
Effect #7

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-7"> 
  <div class="img-block"> 
    <div class="img img-1"> 
      <img src="img/ef7.jpg" alt="Effect #7" /> 
    </div> 
    <div class="img img-2"> 
      <img src="img/ef7.jpg" alt="Effect #7" /> 
    </div> 
    <div class="img img-3"> 
      <img src="img/ef7.jpg" alt="Effect #7" /> 
    </div> 
    <div class="img img-4"> 
      <img src="img/ef7.jpg" alt="Effect #7" /> 
    </div> 
    <div class="img img-5"> 
      <img src="img/ef7.jpg" alt="Effect #7" /> 
    </div> 
  </div> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-7 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-7 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-7 .overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  left: 70%;
  top: 70%;
  border-radius: 500px;
  z-index: 10;
  -moz-transition: all 0.2s linear 0.2s;
  -o-transition: all 0.2s linear 0.2s;
  -ms-transition: all 0.2s linear 0.2s;
  -webkit-transition: all 0.2s linear 0.2s;
  transition: all 0.2s linear 0.2s;
}

.eff-7 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 47px;
  left: 40px;
}

.eff-7 .img-block {
  position: relative;
  height: 100%;
}

.eff-7 .img-block .img {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-7 .img-block .img-1 {
  top: 0px;
  left: 0px;
  z-index: 2;
}

.eff-7 .img-block .img-2 {
  top: 20%;
  left: 0px;
  z-index: 3;
}

.eff-7 .img-block .img-2 img {
  -moz-transform: translateY(-20%);
  -o-transform: translateY(-20%);
  -ms-transform: translateY(-20%);
  -webkit-transform: translateY(-20%);
  transform: translateY(-20%);
}

.eff-7 .img-block .img-3 {
  top: 40%;
  left: 0px;
  z-index: 4;
}

.eff-7 .img-block .img-3 img {
  -moz-transform: translateY(-40%);
  -o-transform: translateY(-40%);
  -ms-transform: translateY(-40%);
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
}

.eff-7 .img-block .img-4 {
  top: 60%;
  left: 0px;
  z-index: 5;
}

.eff-7 .img-block .img-4 img {
  -moz-transform: translateY(-60%);
  -o-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
}

.eff-7 .img-block .img-5 {
  top: 80%;
  left: 0px;
  z-index: 6;
}

.eff-7 .img-block .img-5 img {
  -moz-transform: translateY(-80%);
  -o-transform: translateY(-80%);
  -ms-transform: translateY(-80%);
  -webkit-transform: translateY(-80%);
  transform: translateY(-80%);
}

.eff-7 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  z-index: 1;
  opacity: 0;
  -moz-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-7 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-7 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-7 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-7 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-7:hover .img-block .img {
  left: 100%;
}

.eff-7:hover .img-block .img-1 {
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-7:hover .img-block .img-2 {
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.eff-7:hover .img-block .img-3 {
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-7:hover .img-block .img-4 {
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.eff-7:hover .img-block .img-5 {
  -moz-transition-delay: 0.6s;
  -ms-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.eff-7:hover .overlay {
  top: 100%;
  left: 100%;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-7:hover .caption {
  opacity: 1;
}
               
                
Effect #8
Effect #8
Effect #8
Effect #8
Effect #8
Effect #8

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-8"> 
  <div class="img-block"> 
    <div class="img img-1"> 
      <img src="img/ef8.jpg" alt="Effect #8" /> 
    </div> 
    <div class="img img-2"> 
      <img src="img/ef8.jpg" alt="Effect #8" /> 
    </div> 
    <div class="img img-3"> 
      <img src="img/ef8.jpg" alt="Effect #8" /> 
    </div> 
    <div class="img img-4"> 
      <img src="img/ef8.jpg" alt="Effect #8" /> 
    </div> 
    <div class="img img-5"> 
      <img src="img/ef8.jpg" alt="Effect #8" /> 
    </div> 
  </div> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-8 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-8 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-8 .overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  left: 70%;
  top: 70%;
  border-radius: 500px;
  z-index: 10;
  -moz-transition: all 0.2s linear 0.2s;
  -o-transition: all 0.2s linear 0.2s;
  -ms-transition: all 0.2s linear 0.2s;
  -webkit-transition: all 0.2s linear 0.2s;
  transition: all 0.2s linear 0.2s;
}

.eff-8 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 47px;
  left: 40px;
}

.eff-8 .img-block {
  position: relative;
  height: 100%;
}

.eff-8 .img-block .img {
  position: absolute;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-8 .img-block .img-1 {
  top: 0px;
  left: 0px;
  z-index: 2;
}

.eff-8 .img-block .img-2 {
  top: 20%;
  right: 20%;
  z-index: 3;
}

.eff-8 .img-block .img-2 img {
  -moz-transform: translate(20%, -20%);
  -o-transform: translate(20%, -20%);
  -ms-transform: translate(20%, -20%);
  -webkit-transform: translate(20%, -20%);
  transform: translate(20%, -20%);
}

.eff-8 .img-block .img-3 {
  top: 40%;
  right: 40%;
  z-index: 4;
}

.eff-8 .img-block .img-3 img {
  -moz-transform: translate(40%, -40%);
  -o-transform: translate(40%, -40%);
  -ms-transform: translate(40%, -40%);
  -webkit-transform: translate(40%, -40%);
  transform: translate(40%, -40%);
}

.eff-8 .img-block .img-4 {
  top: 60%;
  right: 60%;
  z-index: 5;
}

.eff-8 .img-block .img-4 img {
  -moz-transform: translate(60%, -60%);
  -o-transform: translate(60%, -60%);
  -ms-transform: translate(60%, -60%);
  -webkit-transform: translate(60%, -60%);
  transform: translate(60%, -60%);
}

.eff-8 .img-block .img-5 {
  top: 80%;
  right: 80%;
  z-index: 6;
}

.eff-8 .img-block .img-5 img {
  -moz-transform: translate(80%, -80%);
  -o-transform: translate(80%, -80%);
  -ms-transform: translate(80%, -80%);
  -webkit-transform: translate(80%, -80%);
  transform: translate(80%, -80%);
}

.eff-8 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  -moz-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-8 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-8 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-8 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-8 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-8:hover .overlay {
  top: 100%;
  left: 100%;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-8:hover .img-block .img {
  opacity: 0;
}

.eff-8:hover .img-block .img-1 {
  -moz-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.eff-8:hover .img-block .img-2 {
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-8:hover .img-block .img-3 {
  -moz-transition-delay: 0.55s;
  -ms-transition-delay: 0.55s;
  -o-transition-delay: 0.55s;
  -webkit-transition-delay: 0.55s;
  transition-delay: 0.55s;
}

.eff-8:hover .img-block .img-4 {
  -moz-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

.eff-8:hover .img-block .img-5 {
  -moz-transition-delay: 0.85s;
  -ms-transition-delay: 0.85s;
  -o-transition-delay: 0.85s;
  -webkit-transition-delay: 0.85s;
  transition-delay: 0.85s;
}

.eff-8:hover .caption {
  opacity: 1;
}

.eff-8:hover .overlay {
  top: 100%;
  left: 100%;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}                  
                
Effect #9
Effect #9
Effect #9
Effect #9
Effect #9

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-9"> 
  <div class="img-block"> 
    <div class="img img-1"> 
      <img src="img/ef9.jpg" alt="Effect #9" /> 
    </div> 
    <div class="img img-2"> 
      <img src="img/ef9.jpg" alt="Effect #9" /> 
    </div> 
    <div class="img img-3"> 
      <img src="img/ef9.jpg" alt="Effect #9" /> 
    </div> 
    <div class="img img-4"> 
      <img src="img/ef9.jpg" alt="Effect #9" /> 
    </div> 
  </div> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-9 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-9 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-9 .img-block {
  position: relative;
  height: 100%;
}

.eff-9 .img-block .img {
  position: absolute;
  width: 100%;
  overflow: hidden;
  -moz-transition: all 0.25s linear 0s;
  -o-transition: all 0.25s linear 0s;
  -ms-transition: all 0.25s linear 0s;
  -webkit-transition: all 0.25s linear 0s;
  transition: all 0.25s linear 0s;
}

.eff-9 .img-block .img-1 {
  top: 0px;
  left: 0px;
  z-index: 2;
  height: 100%; 
}

.eff-9 .img-block .img-2 {
  top: 0%;
  left: 50%;
  z-index: 3;
  height: 100%;
}

.eff-9 .img-block .img-2 img {
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.eff-9 .img-block .img-3 {
  top: 50%;
  left: 0%;
  z-index: 4;
  height: 100%;
}

.eff-9 .img-block .img-3 img {
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -o-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.eff-9 .img-block .img-4 {
  top: 50%;
  left: 50%;
  z-index: 5;
  height: 100%;
}

.eff-9 .img-block .img-4 img {
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.eff-9 .overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.6);
  position: absolute;
  left: 70%;
  top: 70%;
  border-radius: 500px;
  z-index: 10;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-9 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 47px;
  left: 40px;
}

.eff-9 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  -moz-transition: all 0.01s linear 0.4s;
  -o-transition: all 0.01s linear 0.4s;
  -ms-transition: all 0.01s linear 0.4s;
  -webkit-transition: all 0.01s linear 0.4s;
  transition: all 0.01s linear 0.4s;
}

.eff-9 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-9 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-9 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-9 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-9:hover .img-block .img {
  opacity: 0;
}

.eff-9:hover .img-block .img-1 {
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-9:hover .img-block .img-2 {
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-9:hover .img-block .img-3 {
  -moz-transition-delay: 0.6s;
  -ms-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.eff-9:hover .img-block .img-4 {
  -moz-transition-delay: 0.8s;
  -ms-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.eff-9:hover .overlay {
  top: 100%;
  left: 100%;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-9:hover .caption {
  opacity: 1;
}                  
                
Effect #10
Effect #10

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-10"> 
  <img src="img/ef10.jpg" alt="Effect #10" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="gradient"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-10 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-10 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-10 .overlay {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  border-right: 50px solid rgba(255,255,255,0.6);
  position: absolute;
  right: 0;
  bottom: 0;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  -webkit-transform-origin: right;
  transform-origin: right;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-10 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 5px;
  -moz-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-10 .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: -moz-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: -ms-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: -o-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: -webkit-radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  background: radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7));
  opacity: 0;
  -moz-transition: all 0.3s linear 0.2s;
  -ms-transition: all 0.3s linear 0.2s;
  -o-transition: all 0.3s linear 0.2s;
  -webkit-transition: all 0.3s linear 0.2s;
  transition: all 0.3s linear 0.2s;
} 

.eff-10 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-10 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-10 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-10 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-10 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-10:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.eff-10:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-10:hover .gradient {
  opacity: 1;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-10:hover .caption {
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -moz-transition-delay: 0.45s;
  -ms-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}                  
                
Effect #11
Effect #11

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-11"> 
  <img src="img/ef11.jpg" alt="Effect #11" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="gradient"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-11 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-11 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-11 .overlay {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  border-right: 50px solid rgba(255,255,255,0.6);
  position: absolute;
  right: 0;
  bottom: 0;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  -webkit-transform-origin: right;
  transform-origin: right;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-11 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 5px;
  -moz-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-11 .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -o-linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -ms-linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -webkit-linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  opacity: 0;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
  -o-transform-origin: left;
  -webkit-transform-origin: left;
  transform-origin: left;
  -moz-transition: transform 0.15s linear 0s, opacity 0.55s linear 0s;
  -ms-transition: transform 0.15s linear 0s, opacity 0.55s linear 0s;
  -o-transition: transform 0.15s linear 0s, opacity 0.55s linear 0s;
  -webkit-transition: transform 0.15s linear 0s, opacity 0.55s linear 0s;
  transition: transform 0.15s linear 0s, opacity 0.55s linear 0s;
} 

.eff-11 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-11 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-11 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-11 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-11 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-11:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.eff-11:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-11:hover .gradient {
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  opacity: 1;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s
}

.eff-11:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}                  
                
Effect #12
Effect #12

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-12"> 
  <img src="img/ef12.jpg" alt="Effect #12" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="gradient"></div> 
  <div class="inner-gradient"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-12 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-12 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-12 .overlay {
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  border-right: 50px solid rgba(255,255,255,0.6);
  position: absolute;
  right: 0;
  bottom: 0;
  -moz-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  -webkit-transform-origin: right;
  transform-origin: right;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-12 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 5px;
  -moz-transition: all 0.01s linear 0.2s;
  -o-transition: all 0.01s linear 0.2s;
  -ms-transition: all 0.01s linear 0.2s;
  -webkit-transition: all 0.01s linear 0.2s;
  transition: all 0.01s linear 0.2s;
}

.eff-12 .gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: -moz-linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -ms-linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -o-linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -webkit-linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  -moz-transition: all 0.25s linear 0.2s;
  -ms-transition: all 0.25s linear 0.2s;
  -o-transition: all 0.25s linear 0.2s;
  -webkit-transition: all 0.25s linear 0.2s;
  transition: all 0.25s linear 0.2s;
} 

.eff-12 .inner-gradient {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -ms-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -o-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%);
  -moz-transition: all 0.25s linear 0.2s;
  -ms-transition: all 0.25s linear 0.2s;
  -o-transition: all 0.25s linear 0.2s;
  -webkit-transition: all 0.25s linear 0.2s;
  transition: all 0.25s linear 0.2s;
}

.eff-12 .caption {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-12 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-12 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-12 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-12 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-12:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.eff-12:hover .overlay .icon {
  opacity: 0;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-12:hover .gradient {
  opacity: 0;
}

.eff-12:hover .inner-gradient {
  opacity: 1;
}

.eff-12:hover .caption {
  left: 0px;
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}                  
                
Effect #13
Effect #13

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-13"> 
  <img src="img/ef13.jpg" alt="Effect #13" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-13 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-13 img {
  min-width: 100%;
  min-height: 100%;
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -moz-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-13 .overlay {
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-13 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 11px;
  left: 45%;
  opacity: 1;
  -moz-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-13 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-13 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-13 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-13 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-13 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-13:hover img {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.eff-13:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.eff-13:hover .overlay .icon {
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  opacity: 0;
}

.eff-13:hover .caption h4,
.eff-13:hover .caption p,
.eff-13:hover .caption a {
  opacity: 1;
}

.eff-13:hover .caption h4 {
  -moz-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.eff-13:hover .caption p {
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-13:hover .caption a {
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}                  
                
Effect #14
Effect #14

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-14"> 
  <img src="img/ef14.jpg" alt="Effect #14" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-14 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-14 img {
  min-width: 100%;
  min-height: 100%;
  height: -moz-calc(100% + 30px);
  height: -ms-calc(100% + 30px);
  height: -o-calc(100% + 30px);
  height: -webkit-calc(100% + 30px);
  height: calc(100% + 30px);
  width: -moz-calc(100% + 30px);
  width: -o-calc(100% + 30px);
  width: -ms-calc(100% + 30px);
  width: -webkit-calc(100% + 30px);
  width: calc(100% + 30px);
  -moz-transform: translate(-30px,0);
  -ms-transform: translate(-30px,0);
  -o-transform: translate(-30px,0);
  -webkit-transform: translate(-30px,0);
  transform: translate(-30px,0);
  -moz-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-14 .overlay {
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-14 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 11px;
  left: 45%;
  -moz-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-14 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-14 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  top: -200px;
  -moz-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -o-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
}

.eff-14 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-14 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  position: relative;
  top: -250px;
  -moz-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -o-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
}

.eff-14 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
  top: -300px;
  position: relative;
  -moz-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -o-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
  transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s;
}

.eff-14:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.eff-14:hover .overlay .icon {
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  opacity: 0;
}

.eff-14:hover img {
  -moz-transform: translate(0,0);
  -ms-transform: translate(0,0);
  -webkit-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

.eff-14:hover .caption h4,
.eff-14:hover .caption p,
.eff-14:hover .caption a {
  top: 0px;
}

.eff-14:hover .caption h4 {
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.eff-14:hover .caption p {
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-14:hover .caption a {
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}                  
                
Effect #15
Effect #15

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-15"> 
  <img src="img/ef15.jpg" alt="Effect #15" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-15 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-15 img {
  min-width: 100%;
  min-height: 100%;
  height: -moz-calc(100% + 30px);
  height: -ms-calc(100% + 30px);
  height: -o-calc(100% + 30px);
  height: -webkit-calc(100% + 30px);
  height: calc(100% + 30px);
  width: -moz-calc(100% + 30px);
  width: -o-calc(100% + 30px);
  width: -ms-calc(100% + 30px);
  width: -webkit-calc(100% + 30px);
  width: calc(100% + 30px);
  -moz-transform: translate(-30px,-30px) scale(1);
  -ms-transform: translate(-30px,-30px) scale(1);
  -o-transform: translate(-30px,-30px) scale(1);
  -webkit-transform: translate(-30px,-30px) scale(1);
  transform: translate(-30px,-30px) scale(1);
  -moz-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-15 .overlay {
  width: 100%;
  height: 45px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  -ms-transition: all 0.15s linear 0s;
  -moz-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-15 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 11px;
  left: 45%;
  -moz-transition: all 0.01s linear 0s;
  -ms-transition: all 0.01s linear 0s;
  -o-transition: all 0.01s linear 0s;
  -webkit-transition: all 0.01s linear 0s;
  transition: all 0.01s linear 0s;
}

.eff-15 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
}

.eff-15 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
  left: 400px;
  -moz-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -o-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
}

.eff-15 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-15 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
  position: relative;
  left: 400px;
  -moz-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -o-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
}

.eff-15 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
  left: 400px;
  position: relative;
  -moz-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -o-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
  transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s;
}

.eff-15:hover .overlay {
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.eff-15:hover .overlay .icon {
  -moz-transition-delay: 0.1s;
  -ms-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  opacity: 0;
}

.eff-15:hover img {
  -moz-transform: translate(0px,0px) scale(1.1);
  -o-transform: translate(0px,0px) scale(1.1);
  -ms-transform: translate(0px,0px) scale(1.1);
  -webkit-transform: translate(0px,0px) scale(1.1);
  transform: translate(0px,0px) scale(1.1);
}

.eff-15:hover .caption h4,
.eff-15:hover .caption p,
.eff-15:hover .caption a {
  left: 0px;
}

.eff-15:hover .caption h4 {
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.eff-15:hover .caption p {
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.eff-15:hover .caption a {
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}                  
                
Effect #16
Effect #16

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-16"> 
  <img src="img/ef16.jpg" alt="Effect #16" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="triangle-set"> 
    <div class="triangle triangle-1"></div> 
    <div class="triangle triangle-2"></div> 
    <div class="triangle triangle-3"></div> 
    <div class="triangle triangle-4"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-16 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-16 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-16 .overlay {
  width: 45px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-16 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 46%;
  left: 6px;
}

.eff-16 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.eff-16 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-16 .triangle-1 {
  border-top: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}

.eff-16 .triangle-2 {
  border-right: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-16 .triangle-3 {
  border-bottom: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-16 .triangle-4 {
  border-left: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}

.eff-16 .caption {
  position: absolute;
  top: 0px;
  left: -100%;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-16 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-16 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-16 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-16 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-16:hover .overlay {
  right: -45px;
}

.eff-16:hover .overlay .icon {
  opacity: 0;
}

.eff-16:hover .triangle {
  opacity: 1;
}

.eff-16:hover .triangle-1 {
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-16:hover .triangle-2 {
  -moz-transition-delay: 0.55s;
  -o-transition-delay: 0.55s;
  -ms-transition-delay: 0.55s;
  -webkit-transition-delay: 0.55s;
  transition-delay: 0.55s;
}

.eff-16:hover .triangle-3 {
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-16:hover .triangle-4 {
  -moz-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.eff-16:hover .caption {
  left: 0px;
  -moz-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  -ms-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}                  
                
Effect #17
Effect #17

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-17"> 
  <img src="img/ef17.jpg" alt="Effect #17" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="triangle-set">
    <div class="triangle triangle-1"></div> 
    <div class="triangle triangle-2"></div> 
    <div class="triangle triangle-3"></div> 
    <div class="triangle triangle-4"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-17 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-17 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-17 .overlay {
  width: 45px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-17 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 46%;
  left: 6px;
}

.eff-17 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.eff-17 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  opacity: 0;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-17 .triangle-1 {
  border-top: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}

.eff-17 .triangle-2 {
  border-right: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-17 .triangle-3 {
  border-bottom: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-17 .triangle-4 {
  border-left: 150px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}

.eff-17 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-17 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-17 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-17 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-17 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-17:hover .overlay {
  right: -45px;
}

.eff-17:hover .overlay .icon {
  opacity: 0;
}

.eff-17:hover .triangle {
  opacity: 1;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.eff-17:hover .triangle-1 {
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-17:hover .triangle-2 {
  -moz-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.eff-17:hover .triangle-3 {
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-17:hover .triangle-4 {
  -moz-transition-delay: 0.55s;
  -ms-transition-delay: 0.55s;
  -o-transition-delay: 0.55s;
  -webkit-transition-delay: 0.55s;
  transition-delay: 0.55s;
}

.eff-17:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0.6s;
  -ms-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}                  
                
Effect #18
Effect #18

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-18"> 
  <img src="img/ef18.jpg" alt="Effect #18" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="triangle-set"> 
    <div class="triangle triangle-1"></div> 
    <div class="triangle triangle-2"></div> 
    <div class="triangle triangle-3"></div> 
    <div class="triangle triangle-4"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-18 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-18 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-18 .overlay {
  width: 45px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-18 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 46%;
  left: 6px;
}

.eff-18 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.eff-18 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 0;
  border: 5px solid transparent;
  -moz-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s;
  -o-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s;
  -ms-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s;
  -webkit-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s;
  transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s;
}

.eff-18 .triangle-1 {
  border-top: 5px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}

.eff-18 .triangle-2 {
  border-right: 5px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-18 .triangle-3 {
  border-bottom: 5px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-18 .triangle-4 {
  border-left: 5px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}

.eff-18 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-18 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-18 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-18 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-18 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-18:hover .triangle {
  opacity: 1;
  border-width: 150px;
}

.eff-18:hover .overlay {
  right: -45px;
}

.eff-18:hover .overlay .icon {
  opacity: 0;
}

.eff-18:hover .caption {
  top: 0px;
  -moz-transition-delay: 0.35s
  -o-transition-delay: 0.35s
  -ms-transition-delay: 0.35s
  -webkit-transition-delay: 0.35s
  transition-delay: 0.35s
}                  
                
Effect #19
Effect #19

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-19"> 
  <img src="img/ef19.jpg" alt="Effect #19" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="triangle-set"> 
    <div class="triangle triangle-1"></div> 
    <div class="triangle triangle-2"></div> 
    <div class="triangle triangle-3"></div> 
    <div class="triangle triangle-4"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-19 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-19 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-19 .overlay {
  width: 100px;
  height: 60px;
  position: absolute;
  left: 102px;
  top: 119px;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-19 .overlay:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: -75px;
  left: 0px;
}

.eff-19 .overlay:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 60px;
  left: 0px;
}

.eff-19 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 20px;
  left: 32px;
}

.eff-19 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.eff-19 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-19 .triangle-1 {
  border-top: 0px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
}

.eff-19 .triangle-2 {
  border-right: 0px solid rgba(255,255,255,0.6);
  top: 0px;
  right: 0px;
}

.eff-19 .triangle-3 {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: 0px;
}

.eff-19 .triangle-4 {
  border-left: 0px solid rgba(255,255,255,0.6);
  bottom: 0px;
  left: 0px;
}

.eff-19 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-19 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-19 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-19 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-19 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-19:hover .overlay {
  -moz-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  -o-transform: rotate(200deg);
  -webkit-transform: rotate(200deg);
  transform: rotate(200deg);
  opacity: 0;
}

.eff-19:hover .overlay .icon {
  opacity: 0;
}

.eff-19:hover .triangle {
  opacity: 1;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-19:hover .triangle-1 {
  border-top: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .triangle-2 {
  border-right: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .triangle-3 {
  border-bottom: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .triangle-4 {
  border-left: 30px solid rgba(255,255,255,0.7);
}

.eff-19:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}                  
                
Effect #20
Effect #20

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-20"> 
  <img src="img/ef20.jpeg" alt="Effect #20" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="triangle-set"> 
    <div class="triangle triangle-1"></div> 
    <div class="triangle triangle-2"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-20 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-20 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-20 .overlay {
  width: 100px;
  height: 60px;
  position: absolute;
  left: 102px;
  top: 119px;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-20 .overlay:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: -75px;
  left: 0px;
}

.eff-20 .overlay:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 60px;
  left: 0px;
}

.eff-20 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 20px;
  left: 32px;
}

.eff-20 .triangle-set {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.eff-20 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-20 .triangle-1 {
  border-top: 40px solid rgba(255,255,255,0.6);
  border-left: 40px solid rgba(255,255,255,0.6);
  top: 0px;
  left: -100%;
}

.eff-20 .triangle-2 {
  border-right: 40px solid rgba(255,255,255,0.6);
  border-bottom: 40px solid rgba(255,255,255,0.6);
  bottom: 0px;
  right: -100%;
}

.eff-20 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  -o-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
}

.eff-20 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-20 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-20 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-20 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-20:hover .triangle {
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-20:hover .triangle-1 {
  left: 0px;
}

.eff-20:hover .triangle-2 {
  right: 0px;
}

.eff-20:hover .caption {
  top: 0px;
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.eff-20:hover .overlay {
  -moz-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  -o-transform: rotate(200deg);
  -webkit-transform: rotate(200deg);
  transform: rotate(200deg);
  opacity: 0;
}

.eff-20:hover .overlay .icon {
  opacity: 0;
}                  
                
Effect #21
Effect #21

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-21"> 
  <img src="img/ef21.jpg" alt="Effect #21" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="triangle"></div> 
  <div class="caption">
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-21 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-21 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-21 .overlay {
  width: 100px;
  height: 60px;
  position: absolute;
  left: 102px;
  top: 119px;
  background: rgba(255,255,255,0.6);
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-21 .overlay:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-bottom: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: -75px;
  left: 0px;
}

.eff-21 .overlay:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
  border-top: 25px solid rgba(255,255,255,0.6);
  position: absolute;
  top: 60px;
  left: 0px;
}

.eff-21 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 20px;
  left: 32px;
}

.eff-21 .triangle {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 150px solid transparent;
  border-top: 150px solid rgba(255,255,255,0.6);
  border-left: 500px solid rgba(255,255,255,0.6);
  border-bottom: 150px solid rgba(255,255,255,0.6);
  top: 0px;
  left: 0px;
  opacity: 0;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-21 .caption {
  position: absolute;
  top: 0px;
  left: -100%;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  -o-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
  transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s;
}

.eff-21 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-21 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-21 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-21 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-21:hover .triangle {
  opacity: 1;
  border-left: 100px solid rgba(255,255,255,0.6);
}

.eff-21:hover .caption {
  left: 0px;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.eff-21:hover .overlay {
  -moz-transform: rotate(200deg);
  -o-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  -webkit-transform: rotate(200deg);
  transform: rotate(200deg);
  opacity: 0;
}

.eff-21:hover .overlay .icon {
  opacity: 0;
}                  
                
Effect #22
Effect #22
Effect #22

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-22"> 
  <div class="img-block img-block-left"> 
    <img src="img/ef22.jpg" alt="Effect #22" /> 
  </div> 
  <div class="img-block img-block-right"> 
    <img src="img/ef22.jpg" alt="Effect #22" /> 
  </div> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-22 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-22 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-22 .img-block {
  height: 100%;
  width: 50%;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-22 .img-block-left {
  top: 0px;
  left: 0px;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

.eff-22 .img-block-right {
  top: 0px;
  right: 0px;
  -moz-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  -o-transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

.eff-22 .img-block-right img {
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.eff-22 .overlay {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  border: 150px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  -moz-transition: all 0.2s linear 0.2s;
  -ms-transition: all 0.2s linear 0.2s;
  -o-transition: all 0.2s linear 0.2s;
  -webkit-transition: all 0.2s linear 0.2s;
  transition: all 0.2s linear 0.2s;
}

.eff-22 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 17px;
  left: -18px;
}

.eff-22 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  -moz-transition: all 0.01s linear 0.3s;
  -ms-transition: all 0.01s linear 0.3s;
  -o-transition: all 0.01s linear 0.3s;
  -webkit-transition: all 0.01s linear 0.3s;
  transition: all 0.01s linear 0.3s;
}

.eff-22 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-22 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-22 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-22 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-22:hover .overlay {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-22:hover .overlay .icon {
  opacity: 0;
}

.eff-22:hover .img-block-left {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.eff-22:hover .img-block-right {
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.eff-22:hover .img-block {
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-22:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;                  
                
Effect #23
Effect #23
Effect #23

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-23"> 
  <div class="img-block img-block-top"> 
    <img src="img/ef23.jpg" alt="Effect #23" /> 
  </div> 
  <div class="img-block img-block-bottom"> 
    <img src="img/ef23.jpg" alt="Effect #23" /> 
  </div> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-23 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-23 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-23 .img-block {
  height: 50%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 5;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-23 .img-block-top {
  top: 0px;
  left: 0px;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  -webkit-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
}

.eff-23 .img-block-bottom {
  bottom: 0px;
  left: 0px;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.eff-23 .img-block-bottom img {
  -moz-transform-origin: bottom;
  -o-transform-origin: bottom;
  -ms-transform-origin: bottom;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}

.eff-23 .overlay {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  border: 150px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  -moz-transition: all 0.2s linear 0.1s;
  -ms-transition: all 0.2s linear 0.1s;
  -webkit-transition: all 0.2s linear 0.1s;
  -o-transition: all 0.2s linear 0.1s;
  transition: all 0.2s linear 0.1s;
}

.eff-23 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 17px;
  left: -18px;
}

.eff-23 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  -moz-transition: all 0.01s linear 0.3s;
  -ms-transition: all 0.01s linear 0.3s;
  -o-transition: all 0.01s linear 0.3s;
  -webkit-transition: all 0.01s linear 0.3s;
  transition: all 0.01s linear 0.3s;
}

.eff-23 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-23 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-23 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-23 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-23:hover .img-block {
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.eff-23:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-23:hover .overlay {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-23:hover .overlay .icon {
  opacity: 0;
}                  
                
Effect #24
Effect #24
Effect #24
Effect #24
Effect #24

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-24"> 
  <div class="img-block img-block-1"> 
    <img src="img/ef24.jpg" alt="Effect #24" /> 
  </div> 
  <div class="img-block img-block-2"> 
    <img src="img/ef24.jpg" alt="Effect #24" /> 
  </div> 
  <div class="img-block img-block-3"> 
    <img src="img/ef24.jpg" alt="Effect #24" /> 
  </div> 
  <div class="img-block img-block-4"> 
    <img src="img/ef24.jpg" alt="Effect #24" /> 
  </div> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-24 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-24 img {
  width: 100%;
  height: auto;
}

.eff-24 .overlay {
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  border: 150px solid transparent;
  border-bottom: 50px solid rgba(255,255,255,0.6);
  -moz-transition: all 0.2s linear 0.5s;
  -ms-transition: all 0.2s linear 0.5s;
  -o-transition: all 0.2s linear 0.5s;
  -webkit-transition: all 0.2s linear 0.5s;
  transition: all 0.2s linear 0.5s;
}

.eff-24 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 17px;
  left: -18px;
}

.eff-24 .img-block {
  width: 100%;
  height: 25%;
  position: absolute;
  overflow: hidden;
  left: 0px;
}

.eff-24 .img-block-1 {
  top: 0px;
  z-index: 5;
  -moz-transition: all 0.15s linear 0s;
  -ms-transition: all 0.15s linear 0s;
  -o-transition: all 0.15s linear 0s;
  -webkit-transition: all 0.15s linear 0s;
  transition: all 0.15s linear 0s;
}

.eff-24 .img-block-2 {
  top: 25%;
  z-index: 4;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.eff-24 .img-block-2 img {
  -moz-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  -webkit-transform: translateY(-25%);
  -o-transform: translateY(-25%);
  transform: translateY(-25%);
}

.eff-24 .img-block-3 {
  top: 50%;
  z-index: 3;
  -moz-transition: all 0.45s linear 0s;
  -ms-transition: all 0.45s linear 0s;
  -o-transition: all 0.45s linear 0s;
  -webkit-transition: all 0.45s linear 0s;
  transition: all 0.45s linear 0s;
}

.eff-24 .img-block-3 img {
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.eff-24 .img-block-4 {
  top: 75%;
  z-index: 2;
  -moz-transition: all 0.6s linear 0s;
  -ms-transition: all 0.6s linear 0s;
  -o-transition: all 0.6s linear 0s;
  -webkit-transition: all 0.6s linear 0s;
  transition: all 0.6s linear 0s;
}

.eff-24 .img-block-4 img {
  -moz-transform: translateY(-75%);
  -ms-transform: translateY(-75%);
  -o-transform: translateY(-75%);
  -webkit-transform: translateY(-75%);
  transform: translateY(-75%);
}

.eff-24 .caption {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  z-index: 1;
  -moz-transition: all 0.01s linear 0.6s;
  -ms-transition: all 0.01s linear 0.6s;
  -o-transition: all 0.01s linear 0.6s;
  -webkit-transition: all 0.01s linear 0.6s;
  transition: all 0.01s linear 0.6s;
}

.eff-24 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-24 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-24 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-24 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-24:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-24:hover .img-block {
  top: -25%;
}

.eff-24:hover .img-block-3 {
  -moz-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  -ms-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.eff-24:hover .img-block-2 {
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.eff-24:hover .img-block-1 {
  -moz-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  -ms-transition-delay: 0.45s;
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}

.eff-24:hover .overlay {
  border-bottom: 0px solid rgba(255,255,255,0.6);
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.eff-24:hover .overlay .icon {
  opacity: 0;
}                  
                
Effect #25
Effect #25

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-25"> 
  <img src="img/ef25.jpg" alt="Effect #25" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="flash flash-1"></div> 
  <div class="flash flash-2"></div> 
  <div class="flash flash-3"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-25 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-25 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-25 .overlay {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 130px;
  left: 0px;
  background: rgba(255,255,255,0.6);
  -moz-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -ms-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -o-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -webkit-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
}

.eff-25 .overlay:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0px;
  top: 0;
  left: 100%;
  border: 20px solid transparent;
  border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-25 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 83%;
  z-index: 10;
}

.eff-25 .flash {
  position: absolute;
  width: 100%;
  height: 100px;
  opacity: 0;
  left: 0px;
  background: rgba(255,255,255,0.4);
}

.eff-25 .flash-1 {
  top: 0px;
}

.eff-25 .flash-2 {
  top: 100px;
}

.eff-25 .flash-3 {
  top: 200px;
}

@-webkit-keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}

@-ms-keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}

@-o-keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}

@-moz-keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}

@keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}

.eff-25 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
  -o-transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
  transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
}

.eff-25 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-25 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-25 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-25 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-25:hover .caption {
  top: 0px;
  -moz-transition-delay: 0.8s;
  -ms-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.eff-25:hover .overlay {
  width: 170px;
  left: -190px;
}

.eff-25:hover .flash {
  -moz-animation: flash 0.3s linear;
  -ms-animation: flash 0.3s linear;
  -o-animation: flash 0.3s linear;
  -webkit-animation: flash 0.3s linear;
  animation: flash 0.3s linear;
}

.eff-25:hover .flash-1 {
  -moz-animation-delay: 0.45s;
  -ms-animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
}

.eff-25:hover .flash-2 {
  -moz-animation-delay: 0.55s;
  -ms-animation-delay: 0.55s;
  -o-animation-delay: 0.55s;
  -webkit-animation-delay: 0.55s;
  animation-delay: 0.55s;
}

.eff-25:hover .flash-3 {
  -moz-animation-delay: 0.65s;
  -ms-animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  animation-delay: 0.65s;
}                  
                
Effect #26
Effect #26

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-26"> 
  <img src="img/ef26.jpg" alt="Effect #26" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="flash"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-26 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-26 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-26 .flash {
  position: absolute;
  left: -200px;
  top: -200px;
  background-color: rgba(255,255,255,0.6);
  width: 590px;
  height: 100px;
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.eff-26 .overlay {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 130px;
  left: 0px;
  background: rgba(255,255,255,0.6);
  -moz-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -ms-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -o-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -webkit-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
}

.eff-26 .overlay:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0px;
  top: 0;
  left: 100%;
  border: 20px solid transparent;
  border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-26 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 83%;
  z-index: 10;
}

@-webkit-keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}

@-o-keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}

@-ms-keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}

@-moz-keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}

@keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}

.eff-26 .caption {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  opacity: 0;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-26 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-26 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-26 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-26 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-26:hover .caption {
  opacity: 1;
  -moz-transition-delay: 0.8s;
  -ms-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

.eff-26:hover .flash {
  -moz-animation: flash-movement 0.4s linear 0.45s 2 alternate;
  -ms-animation: flash-movement 0.4s linear 0.45s 2 alternate;
  -webkit-animation: flash-movement 0.4s linear 0.45s 2 alternate;
  -o-animation: flash-movement 0.4s linear 0.45s 2 alternate;
  animation: flash-movement 0.4s linear 0.45s 2 alternate;
}

.eff-26:hover .overlay {
  width: 170px;
  left: -190px;
}                  
                
Effect #27
Effect #27

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-27"> 
  <img src="img/ef27.jpg" alt="Effect #27" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="circle"> 
    <div class="half-circle half-circle-left"></div> 
    <div class="half-circle half-circle-right"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-27 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-27 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-27 .overlay {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 130px;
  left: 0px;
  background: rgba(255,255,255,0.6);
  -moz-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -o-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -ms-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  -webkit-transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
  transition: width 0.2s linear 0s, left 0.15s linear 0.2s;
}

.eff-27 .overlay:after {
  content: " ";
  display: block;
  position: absolute;
  width: 0px;
  top: 0;
  left: 100%;
  border: 20px solid transparent;
  border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-27 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 9px;
  left: 83%;
  z-index: 10;
}

.eff-27 .circle {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  opacity: 0;
}

.eff-27 .circle .half-circle {
  background: rgba(255,255,255,0.6);
  width: 50px;
  height: 100px;
  position: absolute;
}

.eff-27 .circle .half-circle-left {
  top: 0px;
  left: 0px;
  border-radius: 100px 0px 0px 100px;
}

.eff-27 .circle .half-circle-right {
  top: 0px;
  right: 0px;
  border-radius: 0px 100px 100px 0px;
}

@-webkit-keyframes half-circle-left {
  from {
    top: 0px;
    left: 0px;
    border-radius: 100px 0px 0px 100px;
  }

  20% {
    top: 25px;
    left: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    left: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-ms-keyframes half-circle-left {
  from {
    top: 0px;
    left: 0px;
    border-radius: 100px 0px 0px 100px;
  }

  20% {
    top: 25px;
    left: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    left: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-moz-keyframes half-circle-left {
  from {
    top: 0px;
    left: 0px;
    border-radius: 100px 0px 0px 100px;
  }

  20% {
    top: 25px;
    left: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    left: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-o-keyframes half-circle-left {
  from {
    top: 0px;
    left: 0px;
    border-radius: 100px 0px 0px 100px;
  }

  20% {
    top: 25px;
    left: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    left: -500px;
    height: 50px;
    border-radius: 100px;
  }
}


@keyframes half-circle-left {
  from {
    top: 0px;
    left: 0px;
    border-radius: 100px 0px 0px 100px;
  }

  20% {
    top: 25px;
    left: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    left: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-webkit-keyframes half-circle-right {
  from {
    top: 0px;
    right: 0px;
    border-radius: 0px 100px 100px 0px;
  }

  20% {
    top: 25px;
    right: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    right: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-ms-keyframes half-circle-right {
  from {
    top: 0px;
    right: 0px;
    border-radius: 0px 100px 100px 0px;
  }

  20% {
    top: 25px;
    right: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    right: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-moz-keyframes half-circle-right {
  from {
    top: 0px;
    right: 0px;
    border-radius: 0px 100px 100px 0px;
  }

  20% {
    top: 25px;
    right: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    right: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@-o-keyframes half-circle-right {
  from {
    top: 0px;
    right: 0px;
    border-radius: 0px 100px 100px 0px;
  }

  20% {
    top: 25px;
    right: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    right: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

@keyframes half-circle-right {
  from {
    top: 0px;
    right: 0px;
    border-radius: 0px 100px 100px 0px;
  }

  20% {
    top: 25px;
    right: -15px;
    height: 50px;
    border-radius: 100px;
  }

  to {
    top: 0px;
    right: -500px;
    height: 50px;
    border-radius: 100px;
  }
}

.eff-27 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-27 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-27 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-27 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-27 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-27:hover .overlay {
  width: 170px;
  left: -190px;
}

.eff-27:hover .caption {
  top: 0px;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

.eff-27:hover .circle {
  opacity: 1;
  -moz-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.eff-27:hover .half-circle-left {
  -moz-animation: half-circle-left 1s linear 0.55s forwards;
  -ms-animation: half-circle-left 1s linear 0.55s forwards;
  -webkit-animation: half-circle-left 1s linear 0.55s forwards;
  -o-animation: half-circle-left 1s linear 0.55s forwards;
  animation: half-circle-left 1s linear 0.55s forwards;
}

.eff-27:hover .half-circle-right {
  -moz-animation: half-circle-right 1s linear 0.55s forwards;
  -ms-animation: half-circle-right 1s linear 0.55s forwards;
  -webkit-animation: half-circle-right 1s linear 0.55s forwards;
  -o-animation: half-circle-right 1s linear 0.55s forwards;
  animation: half-circle-right 1s linear 0.55s forwards;
}                  
                
Effect #28
Effect #28

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-28"> 
  <img src="img/ef28.jpg" alt="Effect #28" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="circle"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-28 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-28 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-28 .circle {
  width: 600px;
  height: 600px;
  border: 3px solid rgba(255,255,255,0.6);
  -webkit-border-radius: 300px;
  border-radius: 300px;
  position: absolute;
  bottom: -50px;
  left: 50px;
  box-shadow: 0px 0px 235px 1000px rgba(255,255,255,0.5);
  opacity: 0;
  -moz-transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s;
  -ms-transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s;
  -o-transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s;
  -webkit-transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s;
  transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s;
}

.eff-28 .overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  border-radius: 500px;
  background: rgba(255,255,255,0.6);
}

.eff-28 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 39px;
  left: 33px;
}

@-webkit-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-ms-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-o-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-moz-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

.eff-28 .caption {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-28 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-28 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-28 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-28 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-28:hover .circle {
  opacity: 1;
  width: 400px;
  height: 400px;
  -moz-transition-delay: 0.35s;
  -o-transition-delay: 0.35s;
  -ms-transition-delay: 0.35s;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.eff-28:hover .overlay {
  -moz-animation: bounce 0.5s linear forwards;
  -o-animation: bounce 0.5s linear forwards;
  -ms-animation: bounce 0.5s linear forwards;
  -webkit-animation: bounce 0.5s linear forwards;
  animation: bounce 0.5s linear forwards;
}

.eff-28:hover .caption {
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-delay: 0.9s;
  -o-transition-delay: 0.9s;
  -ms-transition-delay: 0.9s;
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}                  
                
Effect #29
Effect #29

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-29"> 
  <img src="img/ef29.jpg" alt="Effect #29" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="square"></div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-29 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-29 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-29 .overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  border-radius: 500px;
  background: rgba(255,255,255,0.6);
}

.eff-29 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 39px;
  left: 33px;
}

@-webkit-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-ms-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-o-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-moz-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

.eff-29 .square {
  width: 84%;
  height: 84%;
  position: absolute;
  top: 7%;
  left: 7%;
  border: 3px solid rgba(255,255,255,0.6);
  border-radius: 10px;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

.eff-29 .caption {
  position: absolute;
  top: -100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  -o-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.eff-29 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-29 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-29 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-29 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}


.eff-29:hover .overlay {
  -moz-animation: bounce 0.5s linear forwards;
  -ms-animation: bounce 0.5s linear forwards;
  -o-animation: bounce 0.5s linear forwards;
  -webkit-animation: bounce 0.5s linear forwards;
  animation: bounce 0.5s linear forwards;
}

.eff-29:hover .square {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  box-shadow: 0px 0px 200px 60px rgba(255,255,255,0.4);
  -moz-transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s;
  -o-transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s;
  -ms-transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s;
  -webkit-transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s;
  transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s;
}

.eff-29:hover .caption {
  top: 0px;
  -moz-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  -ms-transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
  transition-delay: 0.8s;
}                  
                
Effect #30
Effect #30

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More
<div class="effect eff-30"> 
  <img src="img/ef30.jpg" alt="Effect #30" /> 
  <div class="overlay"> 
    <div class="icon"></div> 
  </div> 
  <div class="bubbles"> 
    <div class="bubble"></div> 
    <div class="bubble bubble-2"></div> 
    <div class="bubble bubble-3"></div> 
    <div class="bubble bubble-4"></div> 
    <div class="bubble bubble-5"></div> 
    <div class="bubble bubble-6"></div> 
    <div class="bubble bubble-7"></div> 
    <div class="bubble bubble-8"></div> 
    <div class="bubble bubble-9"></div> 
    <div class="bubble bubble-10"></div> 
    <div class="bubble bubble-11"></div> 
    <div class="bubble bubble-12"></div> 
    <div class="bubble bubble-13"></div> 
  </div> 
  <div class="caption"> 
    <h4>Title is Here</h4> 
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> 
    <a class="btn" href="#" title="View More">View More</a> 
  </div> 
</div>                  
                
.eff-30 {
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.eff-30 img {
  min-width: 100%;
  min-height: 100%;
}

.eff-30 .caption {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  -moz-transition: all 0.4s linear 0s;
  -ms-transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  transition: all 0.4s linear 0s;
}

.eff-30 .caption h4 {
  width: 80%;
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.7);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  padding: 6px 0px;
  position: relative;
}

.eff-30 .caption h4:before {
  content: "";
  width: 0px;
  height: 0px;
  display: block;
  border: 20px solid transparent;
  border-top: 20px solid rgba(0,0,0,0.7);
  position: absolute;
  top: 100%;
  left: 42%;
}

.eff-30 .caption p {
  width: 100%;
  max-width: -webkit-calc(80% - 20px);
  max-width: -o-calc(80% - 20px);
  max-width: -moz-calc(80% - 20px);
  max-width: -ms-calc(80% - 20px);
  max-width: calc(80% - 20px);
  margin: 40px auto 0px auto;
  background: rgba(0,0,0,0.8);
  font-weight: 400;
  padding: 6px 10px;
  font-size: 14px;
}

.eff-30 .caption a {
  display: inline-block;
  margin: 30px auto 0px auto;
  background-color: #7F3B1B;
  color: inherit;
  padding: 7px 20px;
  font-size: 15px;
  box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-decoration: none;
}

.eff-30 .overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  border-radius: 500px;
  background: rgba(255,255,255,0.6);
}

.eff-30 .overlay .icon {
  width: 35px;
  height: 23px;
  background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
  position: absolute;
  top: 39px;
  left: 33px;
}

@-webkit-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-ms-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-o-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@-moz-keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}

.eff-30 .bubbles {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.eff-30 .bubbles .bubble {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 100%;
  background: -moz-radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
  background: -ms-radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
  background: -o-radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
  background: -webkit-radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
  background: radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

.eff-30 .bubbles .bubble-2 {
  left: 20px;
}

.eff-30 .bubbles .bubble-3 {
  left: 60px;
}

.eff-30 .bubbles .bubble-4 {
  left: 90px;
}

.eff-30 .bubbles .bubble-5 {
  left: 120px;
}

.eff-30 .bubbles .bubble-6 {
  left: 150px;
}

.eff-30 .bubbles .bubble-7 {
  left: 250px;
}

.eff-30 .bubbles .bubble-8 {
  left: 300px;
}

.eff-30 .bubbles .bubble-9 {
  left: 190px;
}

.eff-30 .bubbles .bubble-10 {
  left: 220px;
}

.eff-30 .bubbles .bubble-11 {
  left: 270px;
}

.eff-30 .bubbles .bubble-12 {
  left: 45px;
}

.eff-30 .bubbles .bubble-13 {
  left: 15px;
}

@-webkit-keyframes bubble {
from {
  top: 100%;
  }
to {
  top: -100%;
  }
}

@-ms-keyframes bubble {
from {
  top: 100%;
  }
to {
  top: -100%;
  }
}

@-o-keyframes bubble {
from {
  top: 100%;
  }
to {
  top: -100%;
  }
}

@-moz-keyframes bubble {
from {
  top: 100%;
  }
to {
  top: -100%;
  }
}

@keyframes bubble {
from {
  top: 100%;
  }
to {
  top: -100%;
  }
}

.eff-30:hover .bubbles .bubble {
  -moz-animation: bubble 9s infinite;
  -ms-animation: bubble 9s infinite;
  -o-animation: bubble 9s infinite;
  -webkit-animation: bubble 9s infinite;
  animation: bubble 9s infinite;
}

.eff-30:hover .bubbles .bubble-2 {
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.eff-30:hover .bubbles .bubble-3 {
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.eff-30:hover .bubbles .bubble-4 {
  -moz-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  -ms-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.eff-30:hover .bubbles .bubble-5 {
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.eff-30:hover .bubbles .bubble-6 {
  -moz-animation-delay: 7.2s;
  -o-animation-delay: 7.2s;
  -ms-animation-delay: 7.2s;
  -webkit-animation-delay: 7.2s;
  animation-delay: 7.2s;
}

.eff-30:hover .bubbles .bubble-7 {
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.eff-30:hover .bubbles .bubble-8 {
  -moz-animation-delay: 2.6s;
  -o-animation-delay: 2.6s;
  -ms-animation-delay: 2.6s;
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}

.eff-30:hover .bubbles .bubble-9 {
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.eff-30:hover .bubbles .bubble-10 {
  -moz-animation-delay: 6.4s;
  -o-animation-delay: 6.4s;
  -ms-animation-delay: 6.4s;
  -webkit-animation-delay: 6.4s;
  animation-delay: 6.4s;
}

.eff-30:hover .bubbles .bubble-11 {
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
}

.eff-30:hover .bubbles .bubble-12 {
  -moz-animation-delay: 5.3s;
  -o-animation-delay: 5.3s;
  -ms-animation-delay: 5.3s;
  -webkit-animation-delay: 5.3s;
  animation-delay: 5.3s;
}

.eff-30:hover .bubbles .bubble-13 {
  -moz-animation-delay: 8.5s;
  -o-animation-delay: 8.5s;
  -ms-animation-delay: 8.5s;
  -webkit-animation-delay: 8.5s;
  animation-delay: 8.5s;
}

.eff-30:hover .caption {
  top: 0px;
  -moz-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

.eff-30:hover .overlay {
  -moz-animation: bounce 0.6s linear forwards;
  -o-animation: bounce 0.6s linear forwards;
  -ms-animation: bounce 0.6s linear forwards;
  -webkit-animation: bounce 0.6s linear forwards;
  animation: bounce 0.6s linear forwards;
}