Самый простой вариант
В первом примере мы будет изменять фоновое изображение background.
<style type="text/css"> .izo { background: url(http://изо1.jpg) no-repeat 50% 50%; display: block; width: 400px; height: 400px; } .izo:hover { background: url(http://изо2.jpg) no-repeat 50% 50%; } </style> <a href="#" class="izo"></a>
Второй вариант, когда при наведении на картинку, она меняется
То же самое можно оформить с помощью прозрачности фона. Только здесь тег a не пустует.
<style type="text/css"> .demoizo { display: block; text-align: center; } .demoizo:hover, .demoizo:focus, .demoizo:active { background: url(http://изо2.jpg) no-repeat 50% 50%; } .demoizo:hover img, .demoizo:focus img, .demoizo:active img { background: transparent; visibility: hidden; } </style> <a href="#" class="demoizo"> <img src="http://изо1.jpg" /> </a>
Третий вариант
Или благодаря тому, что размещаем один элемент под другим с помощью position: absolute (см. vagabundia.blogspot.com).
<style type="text/css"> .demo { position:relative; margin:0 auto; height: 400px; width:400px; display: block; } .demo img { left: 0; position:absolute; top: 0; } .demo img.raz {opacity:0;filter:alpha(opacity=0);} .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);} .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);} </style> <a class="demo" href="#"> <img class="raz" src="http://изо2.jpg" /> <img class="dva" src="http://изо1.jpg" /> </a>
Добавив свойство transition в последнем примере, изменения будут происходить более плавно.
.demo img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
Пункт 3.1. Здесь же можно внести свойство transform.
.demo img.raz { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); } .demo:hover img.raz { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); } .demo:hover img.dva { -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); }
Пункт 3.2. Или так.
.demo img.raz { -moz-transform:scale(1,0); -webkit-transform:scale(1,0); -o-transform:scale(1,0); -ms-transform:scale(1,0); } .demo:hover img.raz { -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); } .demo:hover img.dva { -moz-transform:rotate(360deg) scale(0); -webkit-transform:rotate(360deg) scale(0); -o-transform:rotate(360deg) scale(0); -ms-transform:rotate(360deg) scale(0); }
Пункт 3.3. А можно воспользоваться свойством margin.
.demo { overflow:hidden; } .demo img.dva, .demo:hover img.raz { margin-top: 0px; } .demo:hover img.dva { margin-top: 400px; } .demo img.raz { margin-top: -400px; }
Пункт 3.4. Главное, чтоб фантазии хватило.
.demo { overflow:hidden; } .demo img.dva, .demo:hover img.raz { margin: 0px; } .demo:hover img.dva { margin-top:400px; margin-left:400px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); } .demo img.raz { margin-top:-400px; margin-left:-400px; }
Последний предложенный Пункт 3.5. будет в разных браузерах отображаться по разному при наведении на картинку курсора, поскольку нет единой договорённости относительно сочетания transform: translate и transform-origin. Мне нравится больше вариант в Mozilla Firefox.
.demo:hover img.dva { -moz-transform: translate(250px, -1400px) scale(0.5, 0.5); -webkit-transform: translate(250px, -1400px) scale(0.5, 0.5); -o-transform: translate(250px, -1400px) scale(0.5, 0.5); -ms-transform: translate(250px, -1400px) scale(0.5, 0.5); -moz-transform-origin: 0px 2700px; -webkit-transform-origin: 0px 2700px; -o-transform-origin: 0px 10000px; -ms-transform-origin: 0px 2700px; opacity:0.3;filter:alpha(opacity=0.3);} .demo:hover img.raz {z-index: 2;}
На www.cssplay.co.uk дан более трудоёмкий способ.
Возможно вы искали вариант, когда при наведении на картинку, она увеличивается.
55 комментариев:
Крутая вещь!!!
<style type="text/css">
,,,,,,,
</style>
без тега style можно внести согласно этой статье http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
Захотел на той же странице еще вставить картинки, вставил другие совсем картинки НО ПОКАЗЫВАЮТ ДВЕ ПЕРВЫХ хотя в коде ссылки на другие картинки.
Как это исправить?
Александр, ICQ:387818339
.izo1 {}
.izo1:hover {}
Подробнее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Если не нужна тень у картинок, то есть получиться ещё проще
Заранее спамибо!
class="demo izo1"
class="demo izo2"
и следовательно
.izo1 img.raz {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}
Где что на что менять ума не приложу.
Спасибо что помогаете таким как я!
Сделал так: class="demo1-2-3" href="#"> где 1;2;3 для разных эффектов
Соответственно в css там где demo то же проставил для разных эффектов 1;2;3
Все работает.
Наоборот, хорошо, что отписались!
подскажите пожалуйста,можно ли делать эффект перекатывания не с картинкой, а с текстом, и как?
Заранее спасибо большое!!))
<div class="demo">
<div class="raz">текст, ссылка, картинка, что угодно</div>
<div class="dva">текст, ссылка, картинка, что угодно</div>
</div>
Теория http://shpargalkablog.ru/2011/04/css-nalozhenie.html
1-й вариант, делаю две разные картинки - "тень" и "картинка", тогда при наведении тень остается, а картинка исчезает.
2-й вариант, делаю две картинки, "картинка с тенью" и "картинка без тени", тогда при первом наведении исчезают обе картинки, только через несколько секунд начинает нормально работать. Даже если сайт был загружен 10 минут назад.
Скажите, как избежать исчезания картинок, ведь первое впечатление о сайте очень важно.
Сайт yut-vl.ru
box-shadow не подходит? http://shpargalkablog.ru/2011/06/css-box-shadow.html
Или filter: drop-shadow?