X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Наведение
L1bert1
L1bert1
Topic Starter сообщение 29.9.2011, 15:01; Ответить: L1bert1
Сообщение #1


Добрый день ребят как сделать вот такое как на скринах
Поясняю Чтобы при наведении курсора на изображение она затемнялась и в этом затемнении была еще небольшая картинка
Вот так делаю не получается
[CSS]
<style type="text/css"><!--
img {
opacity:1;
-moz-opacity:1;
filter: alpha(opacity=100) black;
-khtml-opacity: 1;
background-color:#000;
}


img:hover {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
filter: alpha(opacity=50);
-moz-opacity: 0.5; /* Mozilla 1.6 */
-khtml-opacity: 0.5;
opacity: 0.5;
background:#000 url(pic/Magnify.png) no-repeat center center;
}
--></style>
[/CSS]
в данном случае картинка которая должна накладываться с затемнением но она находиться за изображением(ее не видно, видно ток в том случаее если нет изображения)) как это сделать правельно?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Yasuka
Yasuka
сообщение 30.9.2011, 11:27; Ответить: Yasuka
Сообщение #2


Скорее всего Вам не подойдет такой способ, но... можно вставить картинку в какой-то пустой элемент, а при наведении на него мышки выводить полупрозрачное изображение.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
L1bert1
L1bert1
Topic Starter сообщение 30.9.2011, 14:22; Ответить: L1bert1
Сообщение #3


(Yasuka @ 30.9.2011, 14:27) *
Скорее всего Вам не подойдет такой способ, но... можно вставить картинку в какой-то пустой элемент, а при наведении на него мышки выводить полупрозрачное изображение.


а как это сделать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 30.9.2011, 17:36; Ответить: Webmaster_hb
Сообщение #4


создайте пустой html файл в котором будет только стили ссылка с картинками
и выложите сюда код и архив
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 30.9.2011, 17:37; Ответить: Webmaster_hb
Сообщение #5


пару картинок приложите для примера в тот же архив
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
L1bert1
L1bert1
Topic Starter сообщение 30.9.2011, 18:01; Ответить: L1bert1
Сообщение #6


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Затемнение</title>



<style type="text/css"><!--
img {
opacity:1;
-moz-opacity:1;
filter: alpha(opacity=100) black;
-khtml-opacity: 1;
background-color:#000;
}


img:hover {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
filter: alpha(opacity=50);
-moz-opacity: 0.5; /* Mozilla 1.6 */
-khtml-opacity: 0.5;
opacity: 0.5;
background:#000 url(http://chromegt.ucoz.ua/Design/Images/Type_of_material/Magnify.png) no-repeat center center;
}
--></style>



</head>
<body>
Вот на этой картинке видно что так картинка которая должна накладываться на затемнениея она на заднем фоне
Так как это изображение прозрачное))
<img src="http://vkontakte-app.ru/uploads/posts/2011-05/1305454409_konkyrs.png" />
<br>
На данной картинке изображение которое должно накладываться на затемнение не видно так как оно не прозрачное)<br>
<img src="http://chromegt.ucoz.ua/_ld/3/321.jpg" width="200px" />



</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 30.9.2011, 18:50; Ответить: Webmaster_hb
Сообщение #7


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Затемнение</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
<!--

body {
background-color:#000;
}
a {
position:relative;
border:1px solid red;
display:inline-block;
}
a img.play {
position:absolute;
top:50%;
left:50%;
margin:-45px 0 0 -45px;
}
-->
</style>



</head>
<body>
Вот на этой картинке видно что так картинка которая должна накладываться на затемнениея она на заднем фоне
Так как это изображение прозрачное))
<a href="#"><img src="http://vkontakte-app.ru/uploads/posts/2011-05/1305454409_konkyrs.png" /></a>

На данной картинке изображение которое должно накладываться на затемнение не видно так как оно не прозрачное)
<a href="#"><img src="http://chromegt.ucoz.ua/_ld/3/321.jpg" width="200px" /></a>


<script type="text/javascript">
var play = 'http://chromegt.ucoz.ua/Design/Images/Type_of_material/Magnify.png';
$('a').mouseenter(function(){
$(this).append('<img src="'+play+'" class="play">');
$(this).fadeTo('fast',0.5);
}).mouseleave(function(){
$(this).fadeTo('fast',1);
$(this).find('img.play').remove();
});
</script>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Yasuka
Yasuka
сообщение 2.10.2011, 12:49; Ответить: Yasuka
Сообщение #8


(Yasuka @ 30.9.2011, 14:27) *
Скорее всего Вам не подойдет такой способ, но... можно вставить картинку в какой-то пустой элемент, а при наведении на него мышки выводить полупрозрачное изображение.

Oops... чушь какая-то. Sorry...

Но средствами HTML и CSS можно сделать.
Как-то так, например:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
...
</title>
<style type="text/css">
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
.im {
display: block; /* Чтоб убрать отступ у картинки */
}
.dark {
width: 200px;
height: 200px;
position: relative;
margin-top: -200px;
}
.dark:hover {
background: url(dark.png);
}
</style>
</head>
<body>
<div class="container">
<img src="im.jpg" class="im" alt="Image" />
<div class="dark"></div>
</div>
</body>
</html>

Пример.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 14.10.2011, 14:47; Ответить: Azazaza_hb
Сообщение #9


можно и так:
<style>
#dark{
background:#000000 url(121212.png) center no-repeat;
opacity:0;
width:345px; //размеры обложки
height:500px;
}
#dark:hover{
opacity:0.5;
}
img{
position:absolute;
}
</style>
</head>

<div>
<img src="17131218.jpg" />
<div id="dark"></div>
</div>


вот пример http://htt.pp.ua/dark/

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Хитрое отображение подсказок при наведение мышки на часть картинки
 6 Replica 7980 6.4.2010, 7:34
автор: -HTMLandPHP-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 17.4.2024, 3:39

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet