Jump to content
  • 0

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

SkaZzzz

Asked by SkaZzzz,

 Share

Question

SkaZzzz Explorer

SkaZzzz

Posted
Posted (edited)

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

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

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

image.png

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

image.png

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

magnify.png

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

Edited by SkaZzzz
Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
Searcher Explorer

Searcher

Posted
Posted

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

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

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

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

  • Like 1
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
SkaZzzz Explorer

SkaZzzz

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

  • Like 1
Link to comment
Share on other sites
  • 0
Aleksty Explorer

Aleksty

Posted
Posted (edited)

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

В стили -


#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 by Aleksty
Link to comment
Share on other sites
  • 0
SkaZzzz Explorer

SkaZzzz

Posted
  • Author
Posted

Во-первых, "плавно" при помощи только 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 чуть темнее естественно)...
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
SkaZzzz Explorer

SkaZzzz

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

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

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

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

O_O а по проще О_О блин, прошу Вас сделайте хоть набросок а я уж там разберусь что почём =( а то я в этом деле нуб, и вот такие замудрённые слова не очень понимаю... Хотя бы как пример, как Aleksty сделал :blush:
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted

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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept