• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » 3 CSS эффекта при наведении на картинку (Создать на сайте hover эффект появление текста с наведении)
3 CSS эффекта при наведении на картинку
Kosten
Дата: Вторник, 2020-06-16, 19:17 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26655
Награды: 61


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

Как можно заметить, здесь прописаны @media для адаптивности под разные мобильные аппараты, так, чтоб можно было корректно просматривать материал на больших и малых экранах.



HTML

Код
<div class="akobrazhenas">
  <div class="masulasun">
    <div class="adekopas">
      <div class="magukas">
        <div class="akasdun-img">
          <img src="Ссылка на картинку" alt="Ключевое слово">
        </div>
        <div class="akasdun-text">
          <h2>Это заголовок</h2>
            <p>Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Но пока чили не усиливается, иногда вызывают автора одобрения.</p>
            <div class="akasdun-btn">
              <a class="btn" href="#">Читать далее</a>
            </div>
        </div>
      </div>
    </div>
    <div class="adekopas">
      <div class="akasdun-2">
        <div class="akasdun-img">
          <img src="Ссылка на изображение" alt="Ключевое слово">
        </div>
        <div class="akasdun-text">
          <p>Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Но пока чили не усиливается, иногда вызывают автора одобрения.</p>
          <div class="akasdun-btn">
            <h2>This is heading</h2>
            <a class="btn" href="#">Читать далее</a>
          </div>
        </div>
      </div>
    </div>
    <div class="adekopas">
      <div class="akasdun-3">
        <div class="akasdun-img">
          <img src="Ссылка на снимок" alt="Ключевое слово">
        </div>
        <div class="akasdun-text">
          <h2>This is heading</h2>
          <p>Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Но пока чили не усиливается, иногда вызывают автора одобрения.</p>
          <div class="akasdun-btn">
            <a class="btn" href="#">Читать далее</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

Код
.akobrazhenas {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin: auto;
}

@media (min-width: 576px) {
  .akobrazhenas {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .akobrazhenas {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .akobrazhenas {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .akobrazhenas {
    max-width: 1140px;
  }
}

.masulasun {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.adekopas {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .adekopas {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .adekopas {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  .adekopas {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.pedsamun {
  margin-bottom: 25px;
    text-align: center;
}

.pedsamun h1 {
  font-size: 25px;
    color: #000000;
}

.credit {
    text-align: center;
    font-size: 20px;
    font-weight: 400;
}

.credit a {
    font-weight: 900;
    color: #000000;
    text-decoration: underline;
}

img {
    width: 100%;
    height: auto;
}

/********** akasdun #1 CSS *********/
.magukas {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.magukas .akasdun-img {
  font-size: 0;
}

.magukas .akasdun-img img {
  width: 100%;
  height: auto;
}

.magukas .akasdun-text {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 30px;
  top: calc(100% - 60px);
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, .5);
  transition: .5s;
}

.magukas:hover .akasdun-text {
  top: 0;
}

.magukas .akasdun-text h2 {
  height: 45px;
  color: #ffffff;
  font-size: 25px;
  margin: -15px 0 0 0;
  transition: .5s;
}

.magukas:hover .akasdun-text h2 {
  margin: 0;
}

.magukas .akasdun-text p {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 20px 0;
}

.magukas .akasdun-btn .btn {
  display: inline-block;
  height: 35px;
  padding: 7px 15px;
  color: #333333;
  background: #ffffff;
  text-decoration: none;
}

/********** akasdun #2 CSS *********/
.akasdun-2 {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.akasdun-2 .akasdun-img {
  position: relative;
  font-size: 0;
  overflow: hidden;
}

.akasdun-2 .akasdun-img img {
  position: relative;
  width: 100%;
  height: auto;
  transform: scale(1.2);
  bottom: -25px;
  transition: .5s;
}

.akasdun-2:hover .akasdun-img img {
  bottom: 0;
}

.akasdun-2 .akasdun-text {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 30px;
  top: 50%;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  transition: .5s;
}

.akasdun-2:hover .akasdun-text {
  top: 0;
  opacity: 1;
}

.akasdun-2 .akasdun-text p {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 20px 0;
}

.akasdun-2 .akasdun-btn {
  position: absolute;
  width: 100%;
  padding: 15px 7.5px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
}

.akasdun-2 .akasdun-text h2 {
  display: inline-block;
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  float: left;
  margin: 5px 7.5px 0 7.5px;
}

.akasdun-2 .akasdun-btn .btn {
  position: relative;
  display: inline-block;
  float: right;
  height: 35px;
  padding: 7px 15px;
  margin: 0 7.5px;
  color: #333333;
  background: #ffffff;
  text-decoration: none;
}

/********** akasdun #3 CSS *********/
.akasdun-3 {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

.akasdun-3 .akasdun-img {
  font-size: 0;
  overflow: hidden;
}

.akasdun-3 .akasdun-img img {
  width: 100%;
  height: auto;
  transition: .3s;
}

.akasdun-3:hover .akasdun-img img {
  transform: scale(1.2);
}

.akasdun-3 .akasdun-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  text-align: center;
  background: rgba(0, 0, 0, .5);
  transition: .5s;
  transform: scale(0);
  opacity: 0;
}

.akasdun-3:hover .akasdun-text {
  transform: scale(1);
  opacity: 1;
}

.akasdun-3 .akasdun-text h2 {
  height: 45px;
  color: #ffffff;
  font-size: 25px;
  margin: 0;
}

.akasdun-3 .akasdun-text p {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 20px 0;
}

.akasdun-3 .akasdun-btn .btn {
  display: inline-block;
  height: 35px;
  padding: 7px 15px;
  color: #333333;
  background: #ffffff;
  text-decoration: none;
}

Эффекты наведения изображения на чистом CSS, где идет 3 разных эффекта с появлением информации или подачи в аниморованном виде.

Демонстрация
Прикрепления: 5081369.jpg(58.3 Kb) · css-image-hover.zip(5.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » 3 CSS эффекта при наведении на картинку (Создать на сайте hover эффект появление текста с наведении)
  • Страница 1 из 1
  • 1
Поиск: