ZorNet.Ru — сайт для вебмастера » HTML и CSS » Крутые эффекты для изображений на CSS3

Крутые эффекты для изображений на CSS3

Здесь найдете оригинальные hover эффекты, которые производятся при наведении на картинку на чистом CSS3, что сразу преобразит любой сайт или блог. Здесь представлена анимация на заданные эффекты, где происходит увеличения картинки, а также автоматически появляются надписи ключевых слов. Иди просто появление знаков, виде название получит красивое отображение, которое появится только при наведении на изображение курсор.

Это простой способ для веб-мастера, так, чтобы он мог предоставить данную информацию в красивой, а также в компактном виде, где вы узнаете об данной услуги или предоставленном материале. Здесь собрали наиболее популярные эффекты для предоставления, которые смотрятся от стандартного вида более интересны, где все идут на чистом CSS. Вы их можете задействовать на любом формате изображение, это как вид материалов или фотоальбоме.

Ведь основная направленность этих эффектов идет, но, во-первых, смотрится красиво, а также вы можете изначально ознакомится с тем материалом, где изначально хотели зайти на его. А здесь навели курсор, и все в кратком формате вам предоставляется, если вас заинтересует, то делаем клик и переходим на основной материал, где было закреплена за ним эта картинка. Теперь остается выбрать тот формат эффекта, что посчитаете его более оригинальным для сайта.

Установка:

1. Красивый эффект для плавного увеличение картинки

HTML

Код

<div id="katugas_milada">
  <div class="vemolpg_dsacan">
  <ul class="kaboved">
  <li>
  <img src="Здесь ссылка на изображение" alt="Ключевая фраза">
  <div>
  <div id="katugas_milada">
  <div class="vemolpg_dsacan">
  <h2>ZORNET.RU 1</h2>
  <p>Все для вебмастера</p>
  <a href="">Подробнее</a>
  </div>
  </div>
  </div>
  </li>
  </ul>
  </div>
</div>

CSS

Код

#katugas_milada {
  display: table;
  width: 100%;
  height: 100%;
}

.vemolpg_dsacan {
  padding-right:5px;
  padding-left:5px;
  margin-right:auto;
  margin-left:auto;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.kaboved {
  list-style:none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 0;
}

.kaboved li {
  position: relative;
  display: inline-block;
  box-shadow: 1px 3px 1px 0 rgba(0, 0, 0, 0.08);
  border:1px solid #cfcfcf;
  background-color: #fff;
  font: normal 14px sans-serif;
  margin: 0;
  border: 5px solid #fff;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  max-height: 200px;
  max-width: 212px;
}

@media (max-width:350px) {
  .kaboved li {
  font-size: 10px;
  }
}

.kaboved li img {
  display: block;
  position: relative;
  max-width:100%;
  height:auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.kaboved li > div {
  width: 100%;
  height: 100%;
  position: absolute;
}

.kaboved li:hover > div {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.kaboved li a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
  color: #fff;
  font-size: 90%;
  transition: all 0.4s ease-in-out;
}

.kaboved li a:hover {
  background: #ff0000;
}

.kaboved li div {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.35);
  transition: all 0.4s ease-in-out;
  color: #fff;
}
.kaboved li img {
  transition: all 0.2s linear;
}
.kaboved li:hover img {
  transform: scale(1.3);
}

.kaboved li:hover div {
  opacity: 1;
}

Как видим, что здесь не чего сложного нет, где сам эффект плавного увеличения картинки можно посмотреть на demo странице.

Демонстрация

2. Плавный эффект появления текста с правой стороны

HTML

Код

<div id="pesevod_psavokan">
  <div class="opesanua">
  <ul class="ksaved_anuman">
  <li>
  <img src="Здесь ссылка на изображение под номером 2" alt="Ключевая фраза">
  <div>
  <div id="pesevod_psavokan">
  <div class="opesanua">
  <h2>ZORNET.RU 2</h2>
  <p>Скачать файлы</p>
  <a href="">Подробнее</a>
  </div>
  </div>
  </div>
  </li>
  </ul>
  </div>
</div>

CSS

Код

#pesevod_psavokan {
  display: table;
  width: 100%;
  height: 100%;
}

.opesanua {
  padding-right:5px;
  padding-left:5px;
  margin-right:auto;
  margin-left:auto;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.ksaved_anuman {
  list-style:none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 0;
}

.ksaved_anuman li {
  position: relative;
  display: inline-block;
  box-shadow: 1px 3px 1px 0 rgba(0, 0, 0, 0.08);
  border:1px solid #cfcfcf;
  background-color: #fff;
  font: normal 14px sans-serif;
  margin: 0;
  border: 5px solid #f7f4f4;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  max-height: 215px;
max-width: 224px;

}

@media (max-width:350px) {
  .ksaved_anuman li {
  font-size: 10px;
  }
}

.ksaved_anuman li img {
  display: block;
  position: relative;
  max-width:100%;
  height:auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ksaved_anuman li > div {
  width: 100%;
  height: 100%;
  position: absolute;
}

.ksaved_anuman li:hover > div {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.ksaved_anuman li a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
  color: #f7f4f4;
  background: #000;
  font-size: 90%;
  transition: all 0.4s ease-in-out;
}

.ksaved_anuman li a:hover {
  background: #ff0000;
  color: #f7f4f4;
}

.ksaved_anuman li div {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease-in-out;
  color: #f7f4f4;
  transform: translate(250px, 0px) rotate(0deg);
}

.ksaved_anuman li:hover div {
  opacity: 1;
  transform: translate(0px, 0px) rotate(0deg);
}

Эффект аналогичен первому варианту, разве только темно прозрачная гамма будет появляться по стороны.

Демонстрация

3. Оригинальный эффект плавного появления с низу вверх

Оригинальные hover-эффекты для изображений

HTML

Код

<div id="sumilam_krasatun">
  <div class="posekun_loguvas">
  <ul class="abucaden">
  <li>
  <img src="Здесь ссылка на изображение на 3 номер" alt="Ключевая фраза">
  <div>
  <div id="sumilam_krasatun">
  <div class="posekun_loguvas">
  <h2>ZORNET.RU 3</h2>
  <p>Ключевая фраза</p>
  <a href="">Подробнее</a>
  </div>
  </div>
  </div>
  </li>
  </ul>
  </div>
</div>

CSS

Код

#sumilam_krasatun {
  display: table;
  width: 100%;
  height: 100%;
}

.posekun_loguvas {
  padding-right:5px;
  padding-left:5px;
  margin-right:auto;
  margin-left:auto;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.abucaden {
  list-style:none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 0;
}

.abucaden li {
  position: relative;
  display: inline-block;
  box-shadow: 1px 3px 1px 0 rgba(0, 0, 0, 0.08);
  border:1px solid #cfcfcf;
  background-color: #fff;
  font: normal 14px sans-serif;
  margin: 0;
  border: 5px solid #f7f6f6;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  max-height: 285px;
  max-width: 285px;
}

@media (max-width:350px) {
  .abucaden li {
  font-size: 10px;
  }
}

.abucaden li img {
  display: block;
  position: relative;
  max-width:100%;
  height:auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.abucaden li > div {
  width: 100%;
  height: 100%;
  position: absolute;
}

.abucaden li:hover > div {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.abucaden li a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
  color: #f7f6f6;
  background: #000;
  font-size: 90%;
  transition: all 0.4s ease-in-out;
}

.abucaden li a:hover {
  background: #ff0000;
  color: #f7f6f6;
}

.abucaden li div {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease-in-out;
  color: #f7f6f6;
  transform: translate(0px, 90px) rotate(0deg);
}

.abucaden li:hover div {
  opacity: 1;
  transform: translate(0px, 0px) rotate(0deg);
}

Данный эффект имеет плавную анимацию для появление текста и кнопки для перехода, что по умолчанию идет поверх картинки с нижней стороны. Вот три анимационных эффекта, что выстроены при помощи CSS, где при установки вы можете что то свое привнести или выставить другую палитру цвета.

Демонстрация

30 Августа 2021 Загрузок: 1 Просмотров: 894 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0