Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

Смена картинки с анимацией принаведении


Recommended Posts

Мне понравилось как реализована смена картинки на подобных шаблонах

http://demopavothemes.com/oc3/pav_styleshop_demo4/

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

    top: 0;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: auto;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }

И вставил в свой стандартный шаблон вот сюда:

}
.product-thumb .image a:hover {
	opacity: 0.8;
}

Вместо opacity: 0.8;

Но получилось что картинка исчезала при наведении и все. Я понимаю что это не для моего ума, поэтому прошу помощи спецов. 

Как бы реализовать красивую смену картинки товара при наведении? Может плагин за умеренную плату, может совет бесплатный как код подправить?

Link to post
Share on other sites

Про второе изображение правда, модули есть и тут на форуме. Но вы еще на весь код вытащили. Должна полюбасу быть секция :hover этого класса где анимации (трансформации) подвергаются атрибуты left и right обоих изображений.

Link to post
Share on other sites

4 години назад, zlatoff сказав:

Про второе изображение правда, модули есть и тут на форуме. Но вы еще на весь код вытащили. Должна полюбасу быть секция :hover этого класса где анимации (трансформации) подвергаются атрибуты left и right обоих изображений.

Я уже понял про :hover, но это не помогло. 

8 годин назад, greendragon сказав:

Через css вам это не реализовать, вам же нужно дополнительное изображение подтягивать при наведении

Тут почитайте

Дополнительное оно есть но от не знания оно не подтягивается.

Link to post
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.