« Красивый эффект для изображения на CSS3 и HTML »

Описание материала:

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

CSS код:

Код

/* Красивый эффект для изображения на CSS3 и HTML */
ul {
  margin:20px auto;
  width:30%;
}
ul li {
  display: inline-block;
  list-style: none;
  margin:0 10px;
}
nav {
  margin:20px auto;
  text-align:center
}
nav a {
  display:inline-block;
  text-align:center;
  background:#3498db;
  font-family:'Lato',sans-serif;
  color:#fff;
  font-weight:400;
  padding:5px 26px;
  margin-right:6px;
  text-transform:uppercase;
  border:2px solid #fff;
  letter-spacing:1px;
  text-decoration:none
}
nav a.active,nav a:hover {
  background:#3498db;
  color:#1a4c6e;
  border:2px solid #1a4c6e
}
.left { float:left }
.right { float:right }
.center { margin:50px auto; display:block; width:65% }
@media screen and (max-width: 480px) {
nav a {margin-top:15px}
}
.ufive_effect_img {
  position:relative;
  width:300px;  
  height:200px;
  overflow:hidden;
  background-color:rgba(81, 43, 0, 0.5)
}
.ufive_effect_img p,.ufive_effect_img h2 {
  color:#fff;
  padding:10px;
  left:-20px;
  top:20px;
  position:relative
}
.ufive_effect_img p {
  font-family:'Lato';
  font-size:12px;
  line-height:18px;
  margin:0
}
.ufive_effect_img h2 {
  font-family:'Lato';
  font-size:20px;
  line-height:24px;
  margin:0;
}
.effect_ufive img {
  position:absolute;
  margin:-15px 0;
  right:0;
  top:0;
  cursor:pointer;
  -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
  -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
  -o-transition:top .4s ease-in-out,right .4s ease-in-out;
  transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect_ufive img.top:hover {
  top:-230px;
  right:-330px;
  padding-bottom:200px;
  padding-left:300px
}
/* uFive.Ru */


HTML код:
Код

<ul class="ufive_effect_img effect_ufive">
<li>
<h2>uFive.Ru</h2>
<p>У нас на сайте Вы можете найти и скачать бесплатно, такие материалы для uCoz как: Шаблоны, Скрипты, Информеры. Так же на нашем сайте есть такие разделы: готовые PSD исходники и раздел CSS Элементы</p>
</li>
<li><img class="top" src="http://ufive.ru/demo_file/3_3d_images/ufive.jpg" alt=""/></li>
</ul>


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 53


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев к материалу: 0
avatar