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

SkaZzzz · April 25, 2011

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

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

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

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

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

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

Edited April 25, 2011 by SkaZzzz

Searcher · April 25, 2011

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

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

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

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

Select · April 25, 2011

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

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

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

Searcher · April 25, 2011

Можно сделать плавно
http://ruseller.com/lessons.php?rub=2&id=986
Тут все подробно изложено и исходники есть

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

SkaZzzz · April 25, 2011

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

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

Great Rash · April 25, 2011

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

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

Aleksty · April 25, 2011

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

В стили -


#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, с вашей стрелкой, но наложенная на полупрозрачный фон. Короче, нужно поработать в графическом редакторе.

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

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

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

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

Edited April 25, 2011 by Aleksty

SkaZzzz · April 25, 2011

Во-первых, "плавно" при помощи только 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 чуть темнее естественно)...

Great Rash · April 25, 2011

Копайте в сторону opacity.

SkaZzzz · April 25, 2011

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

Justnewone · April 25, 2011

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

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

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

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

SkaZzzz · April 25, 2011

упорство и еще раз упорство, все получится. тут уже несколько способов подходящих и рабочих подсказали.
Еще 1. Первая картинка - исходная. Вторая - затемненный слой с иконкой "плей".
далее, обертка, скажем, див. Внутри него картинка и ссылка, с второй картинкой в бекграунде, последовательно, не вложенно друг в друга.
Обертке релейтив, ссылку скрыть а на ховер ссылку показывать с абсолютным позиционированием и с нулями по четырем сторонам.

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

Aleksty · April 25, 2011

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

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

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

Justnewone · April 25, 2011

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

#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>

SkaZzzz · April 25, 2011

Спасибо

SkaZzzz · April 25, 2011

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

Justnewone · April 25, 2011

как все загадочно...

SkaZzzz · April 26, 2011

Это не загадочно, это прискорбно =(

SkaZzzz · April 26, 2011

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

Sign In

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

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information