Шикарный CSS Эффект для Изображений при Наведении Курсора #19

Красивые CSS3 Кнопки с Hover Эффектом #18
Красивые CSS3 Кнопки с Hover Эффектом #18
07/06/2017
Красивый CSS3 Эффект для Кнопок #20
Красивый CSS3 Эффект для Кнопок #20
07/06/2017
Шикарный CSS Эффект для Изображений при Наведении Курсора #19

Шикарный CSS Эффект для Изображений при Наведении Курсора #19

Скачать код с Демо дополнениями

<figure class="snip1563">
  <img src="http://interzarabotok.ru/wp-content/uploads/2017/05/sample87.jpg" alt="sample110" />
  <figcaption>
    <h3>Samuel Serif</h3>
    <p>The only skills I have the patience to learn are those that have no real application in life.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1563"><img src="http://interzarabotok.ru/wp-content/uploads/2017/05/sample119.jpg" alt="sample86" />
  <figcaption>
    <h3>Abraham Pigeon</h3>
    <p>The real fun of living wisely is that you get to be smug about it.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1563"><img src="http://interzarabotok.ru/wp-content/uploads/2017/05/sample120.jpg" alt="sample59" />
  <figcaption>
    <h3>Fletch Skinner</h3>
    <p>But Calvin is no kind and loving god! He's one of the old gods! He demands sacrifice! </p>
  </figcaption>
  <a href="#"></a>
</figure>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Teko:700);
.snip1563 {
  background-color: #fff;
  color: #ffffff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px 5px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: right;
  width: 100%;
}

.snip1563 *,
.snip1563 *:before,
.snip1563 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1563 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip1563:before,
.snip1563:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #b81212;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1563:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.snip1563:after {
  -webkit-transform: skew(-30deg) translateX(70%);
  transform: skew(-30deg) translateX(70%);
}

.snip1563 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 20px 20px 20px 40%;
}

.snip1563 figcaption:before,
.snip1563 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip1563 figcaption:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.snip1563 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}

.snip1563 h3,
.snip1563 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip1563 h3 {
  font-family: 'Teko', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip1563 p {
  font-size: 0.9em;
}

.snip1563 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1563:hover h3,
.snip1563.hover h3,
.snip1563:hover p,
.snip1563.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
}

.snip1563:hover:before,
.snip1563.hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip1563:hover:after,
.snip1563.hover:after {
  -webkit-transform: skew(-30deg) translateX(20%);
  transform: skew(-30deg) translateX(20%);
}

.snip1563:hover figcaption:before,
.snip1563.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1563:hover figcaption:after,
.snip1563.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

sample110

Samuel Serif

The only skills I have the patience to learn are those that have no real application in life.


sample86

Abraham Pigeon

The real fun of living wisely is that you get to be smug about it.


sample59

Fletch Skinner

But Calvin is no kind and loving god! He’s one of the old gods! He demands sacrifice!


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *