Учим с нуля!
Оставить отзыв · Пожаловаться · RSS
  • Страница 1 из 1
  • 1
Форум » uCoz » Помощь по uCoz » Эффект при наведение на материал
Эффект при наведение на материал
dline Оффлайн
Проверенный
5
Дата: Вторник, 2015-09-08, 17:15 | Сообщение # 1
Друзья помогите сделать такой-же эффект как на этом сайте gtauberclub.com
Суть этого эффекта в том что при наведение курсором на материал, под изображением заполняется зеленая полоска.

С меня + в репу.
Выжигаю все свое время на своей не любимой работе, а что поделоть хлеб то надо зачтото брать! )))
Профиль
MSerega Оффлайн
Проверенный
92
Дата: Вторник, 2015-09-08, 17:58 | Сообщение # 2
Цитата dline ()
Друзья помогите сделать такой-же эффект как на этом сайте gtauberclub.com
Суть этого эффекта в том что при наведение курсором на материал, под изображением заполняется зеленая полоска.

С меня + в репу.


Код
.newsmain figure::after{
     content: "";
     width: 7%;
     height: 5px;
     left: 0px;
     background: #44B758 none repeat scroll 0% 0%;
     position: absolute;
     bottom: 0px;
}

newsmain:hover figure::after{
width: 100%;}

.newsmain:hover figure::after{
transition: all 0.3s ea
}


Пробуйте
Помог? Ставь или поддержи проект.
Профиль
dline Оффлайн
Проверенный
5
Дата: Вторник, 2015-09-08, 18:10 | Сообщение # 3
А сам код в HTML?
Выжигаю все свое время на своей не любимой работе, а что поделоть хлеб то надо зачтото брать! )))
Профиль
MSerega Оффлайн
Проверенный
92
Дата: Вторник, 2015-09-08, 18:22 | Сообщение # 4
Цитата dline ()
А сам код в HTML?

Код
<div class="newsmain">
<figure>
<a href="$ENTRY_URL$"><img src="$IMAGE1$" alt="$ENTRY_NAME$"></a>
</figure>  
</div>

Помог? Ставь или поддержи проект.
Профиль
BLAzER Оффлайн
Проверенный
86
Дата: Вторник, 2015-09-08, 18:24 | Сообщение # 5
Как будет работать плавность??
Цитата MSerega ()
.newsmain:hover figure::after{
transition: all 0.3s ea
}

:)
Код
.newsmain:hover figure::after{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
У скуки есть светлая сторона. Скучающие люди нередко ищут возможность сделать добрые дела, поскольку развлечения им надоели и не привносят смысл в их жизнь.
Профиль
MSerega Оффлайн
Проверенный
92
Дата: Вторник, 2015-09-08, 18:33 | Сообщение # 6
Цитата BLAzER ()
Как будет работать плавность??

Ну я так по быстрому стырил.)))
Помог? Ставь или поддержи проект.
Профиль
dline Оффлайн
Проверенный
5
Дата: Вторник, 2015-09-08, 18:36 | Сообщение # 7
Код
<div class="mtr">  
<div class="im">  
<div class="inim lifted">  
<a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="330" height="145px" alt="$TITLE$" title="$TITLE$"/></a>  
</div>  
</div>  
<div class="mtr_td">  
  <div class="name_mtr"><a href="$ENTRY_URL$">$TITLE$</a> $MODER_PANEL_RIGHT$</div>  
  <div class="article_counters"><span class="dats">$DATE$ в $TIME$</span><?if($CATEGORY_NAME$)?><a href="$CATEGORY_URL$"><span class="catalog">$CATEGORY_NAME$</span></a><?endif?><span class="views">$READS$</span><span class="user">$USERNAME$</span><span class="coms">$LOADS$</span></div>  
<div class="mtr_d">$MESSAGE$</div>
</div>  
</div>


Куда именно пихать?
Выжигаю все свое время на своей не любимой работе, а что поделоть хлеб то надо зачтото брать! )))
Профиль
MSerega Оффлайн
Проверенный
92
Дата: Вторник, 2015-09-08, 18:51 | Сообщение # 8
Код
<a href="$ENTRY_URL$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_URL1$<?else?>$IMG_URL1$<?endif?>" width="330" height="145px" alt="$TITLE$" title="$TITLE$"/></a>

эксперементируйте с этой строчкой. Увы не могу сейчас точно написать. Занят.
Помог? Ставь или поддержи проект.
Профиль
Форум » uCoz » Помощь по uCoz » Эффект при наведение на материал
  • Страница 1 из 1
  • 1
Поиск:
Главная