Jump to content
  • Sign Up
Sign in to follow this  
SkaZzzz

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

Recommended Posts

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

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

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

image.png

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

image.png

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

magnify.png

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

Edited by SkaZzzz

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites
Во-первых, "плавно" при помощи только css - не получится.

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

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

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

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

Share this post


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

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

Share this post


Link to post
Share on other sites

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

В стили -


#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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites
упорство и еще раз упорство, все получится. тут уже несколько способов подходящих и рабочих подсказали.

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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
Reply to this topic...

×   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.

Sign in to follow this  

  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    SkyMasteer
    Newest Member
    SkyMasteer
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
    • Здравствуйте. Уберите строку следующую строку в файле "wp-content/themes/yoo_nano2_wp-child/style.css" *{ box-sizing: border-box; }  
  • Popular Contributors

×
×
  • Create New...