Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

  • 0
SkaZzzz

Изображение на изображение

Вопрос

Здравствуйте, я бы хотел узнать как можно с помощью CSS наложить одно изображение на другое (при наведении).

То есть, допустим у меня есть картинка, а при наведении на неё она чуть чуть тускнеет, а поверх неё появляется (плавно) другое изображение. Пример:

1. До наведения

image.png

2. После наведения

image.png

3. Вторая картинка такая:

magnify.png

Вот собственно вот так вот... Помогите пожалуйста =)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

Во-первых, "плавно" при помощи только css - не получится.

Во-вторых, если только на css, то состояние при наведении описывает псевдокласс hover. И тут вариантов может быть много, в зависимости от исходных условий.

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

Вариант, когда невозможно заранее иметь такой спрайт, а есть только кадр и стрелка поотдельности, можно реализовать при помощи вложенных блоков. Т.е. в родительском блоке или ссылке фоном ставится кадр, а дочерний блок (этим блоком лучше, конечно, сделять img со стрелкой, но можно и div с фоном картинки со стрелкой, все это должно быть расположено по центру родителя) на всю высоту и ширину родителя делается невидимым (display:none;). При состоянии hover у родителя делаем дочерний блок видимым и, допустим, полупрозрачным (opacity: .5). Вот и все.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Можно сделать плавно

http://ruseller.com/lessons.php?rub=2&id=986

Тут все подробно изложено и исходники есть

Похвально желание показать свою осведомленность :blush: Только вы забыли упомянуть, что способы на css мало где работают...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Во-первых, "плавно" при помощи только css - не получится.

Во-вторых, если только на css, то состояние при наведении описывает псевдокласс hover. И тут вариантов может быть много, в зависимости от исходных условий.

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

Вариант, когда невозможно заранее иметь такой спрайт, а есть только кадр и стрелка поотдельности, можно реализовать при помощи вложенных блоков. Т.е. в родительском блоке или ссылке фоном ставится кадр, а дочерний блок (этим блоком лучше, конечно, сделять img со стрелкой, но можно и div с фоном картинки со стрелкой, все это должно быть расположено по центру родителя) на всю высоту и ширину родителя делается невидимым (display:none;). При состоянии hover у родителя делаем дочерний блок видимым и, допустим, полупрозрачным (opacity: .5). Вот и все.

Эм, извиняюсь за наглость, но не могли бы Вы дать пример такого css =) буду очень благодарен (конструкцию HTML и CSS), если не можете, тогда ладно придётся самому вникать в эту систему... А то я просто вот на примерах могу понять, что к чему, а вот как Вы мне описали, я лишь понял часть из выше описанного... А на счёт плавного перехода тогда не обязательно (главное чтобы при наведении одно изображение тускнело, а другое появлялось, как в примере), потом что-нибудь придумаю, мб скрипт задействую может быть что-нибудь ещё...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Эм, извиняюсь за наглость, но не могли бы Вы дать пример такого css =) буду очень благодарен (конструкцию HTML и CSS), если не можете, тогда ладно придётся самому вникать в эту систему...

Начинайте вникать :blush:

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Попробуйте так:

В стили -


#navpagetop {
width:226px;
height:339px;
position: absolute;
}
#navpagetop div.fons1 {
display:block;
background: url(images/service/page/foto1.png) 0 0 no-repeat;
width:226px;
height:339px;
position: relative;
}
#navpagetop div.fons1:hover {
background: url(images/service/page/foto1_hover.png) 0 0 no-repeat;
}

В html -


<body>
<div id="navpagetop">
<div class="fons1"></div>
</div>
</body>

По картинкам:

1. foto1.png - это ваша картинка №1 на скрине

2. foto1_hover.png - это таже картинка, которая малость затемнена и на нее наложена стрелка или что угодно.

Или, как вариант, это прозрачная png, с вашей стрелкой, но наложенная на полупрозрачный фон. Короче, нужно поработать в графическом редакторе.

При наведении проявится вторая, затемненная.

Для плавности можно привязать скрипт, которых в сети мильен просто.

Этот вариант самый простой на мой взгляд.

ЗЫ. Размеры, путь к картинке и атрибуты можно и нужно сделать свои, просто поменять.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Во-первых, "плавно" при помощи только css - не получится.Во-вторых, если только на css, то состояние при наведении описывает псевдокласс hover. И тут вариантов может быть много, в зависимости от исходных условий. Например, если вы можете заранее подготовить кадр со стрелкой, то делается спрайт из двух изображений друг под другом (кадр и кадр со стрелкой), этот спрайт ставится фоном для блока или для ссылки высотой в половину спрайта, а по состоянию hover просто меняете положение фоновой картинки.Вариант, когда невозможно заранее иметь такой спрайт, а есть только кадр и стрелка поотдельности, можно реализовать при помощи вложенных блоков. Т.е. в родительском блоке или ссылке фоном ставится кадр, а дочерний блок (этим блоком лучше, конечно, сделять img со стрелкой, но можно и div с фоном картинки со стрелкой, все это должно быть расположено по центру родителя) на всю высоту и ширину родителя делается невидимым (display:none;). При состоянии hover у родителя делаем дочерний блок видимым и, допустим, полупрозрачным (opacity: .5). Вот и все.

Попробуйте так:

В стили -

#navpagetop {
width:226px;
height:339px;
position: absolute;
}
#navpagetop div.fons1 {
display:block;
background: url(images/service/page/foto1.png) 0 0 no-repeat;
width:226px;
height:339px;
position: relative;
}
#navpagetop div.fons1:hover {
background: url(images/service/page/foto1_hover.png) 0 0 no-repeat;
}



В html -

<body>
<div id="navpagetop">
<div class="fons1"></div>
</div>
</body>

По картинкам:

1. foto1.png - это ваша картинка №1 на скрине

2. foto1_hover.png - это таже картинка, которая малость затемнена и на нее наложена стрелка или что угодно.

Или, как вариант, это прозрачная png, с вашей стрелкой, но наложенная на полупрозрачный фон. Короче, нужно поработать в графическом редакторе.

При наведении проявится вторая, затемненная.

Для плавности можно привязать скрипт, которых в сети мильен просто.

Этот вариант самый простой на мой взгляд.

ЗЫ. Размеры, путь к картинке и атрибуты можно и нужно сделать свои, просто поменять.

В общем попробовал как Вы написали, но у меня получается что первая картинка пропадает, а вторая появляется... А мне нужно чтобы 1 картинка при наведении чуть чуть затемнялась, а 2 картинка проявлялась как бы над ней. скрин 2. при этом оба изображения должны быть отчётливо видны (1 чуть темнее естественно)...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Ппц, я уже и не знаю что пробовать, постоянно либо получается замена картинок, либо одна и та же картинка с прозрачностью...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

упорство и еще раз упорство, все получится. тут уже несколько способов подходящих и рабочих подсказали.

Еще 1. Первая картинка - исходная. Вторая - затемненный слой с иконкой "плей".

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

Обертке релейтив, ссылку скрыть а на ховер ссылку показывать с абсолютным позиционированием и с нулями по четырем сторонам.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
упорство и еще раз упорство, все получится. тут уже несколько способов подходящих и рабочих подсказали.

Еще 1. Первая картинка - исходная. Вторая - затемненный слой с иконкой "плей".

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

Обертке релейтив, ссылку скрыть а на ховер ссылку показывать с абсолютным позиционированием и с нулями по четырем сторонам.

O_O а по проще О_О блин, прошу Вас сделайте хоть набросок а я уж там разберусь что почём =( а то я в этом деле нуб, и вот такие замудрённые слова не очень понимаю... Хотя бы как пример, как Aleksty сделал :blush:

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

А вы вторую картинку обработайте в редакторе.

Затемните, наложите кнопку, и при замене она и появится.

Будет впечатление от затемнения.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

O_O а по проще О_О блин, прошу Вас сделайте хоть набросок а я уж там разберусь что почём =( а то я в этом деле нуб, и вот такие замудрённые слова не очень понимаю... Хотя бы как пример, как Aleksty сделал :blush:

#navpagetop{
position: relative;
width:226px;
height:339px;
}

#navpagetop:hover IMG{
vertival-align:top;
}

#navpagetop A{
position:absolute;
display:none;
left:0;
top:0;
right:0;
bottom:0;
background: url(images/service/page/foto1_hover.png) no-repeat 50% 50%;
}

#navpagetop:hover A{
display:block
}



В html -

<body>
<div id="navpagetop">
<mg src="путь-до-исходной-картинки" />
<a href="#"></a>
</div>
</body>

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Чёрт.... Теперь если вставить в <a></a> изображение вообще пропадает =( а так всё идеально, ток исчезновения нету =( ладно посмотрю, может сам что-нить нахимичу...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Всё уже не надо, нашёл решение своей проблемы используя скрипт ^.^ ксс задаёт фон, а скрипт его накладывает поверх изображения (img) и затемняет само изображение... воть

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах