Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.07.2013, 23:58   #1
Belai
Новичок
Джуниор
 
Регистрация: 23.07.2013
Сообщений: 4
Радость затемнение картинки с помощбю CSS

Всем привет!
Делаю небольшую галерею для себя.
Вопрос вот в чем: Как с помощью CSS можно сделать так, чтобы::
при наведение на фото курсором, оно появлялось в нормальном цвете, а до этого было затемнено? Т.е темное фото, навел - стало обычное (светлое, оригинал).

Заранее спасибо!
Belai вне форума Ответить с цитированием
Старый 24.07.2013, 02:09   #2
MindWork
Пользователь
 
Регистрация: 08.04.2009
Сообщений: 11
По умолчанию

Можно над каждым фото расположить элемент, залить его каким-нибудь цветом и сделать прозрачным на 20%, а при наведении доводить прозрачность до 100%:
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.container {
	margin: 0 auto;
	width: 660px;
}

.pic {
	float: left;
	height: 200px;
	margin: 10px;
	position: relative;
	width: 200px;
}
.pic:after {
    content: ' ';
	background-color: #000;
	height: 100%;
	left: 0;
	opacity: 0.8;
	position: absolute;
	top: 0;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
	width: 100%;
}
.pic:hover:after {
	opacity: 0;
}
</style>
</head>
<body>
  <div class="container">
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
    <div class="pic">
      <img src="http://placekitten.com/200/200">
    </div>
  </div>
</body>
</html>
Демо: http://jsbin.com/axozew/1/edit

Последний раз редактировалось MindWork; 24.07.2013 в 02:16.
MindWork вне форума Ответить с цитированием
Старый 24.07.2013, 06:41   #3
Belai
Новичок
Джуниор
 
Регистрация: 23.07.2013
Сообщений: 4
По умолчанию

Спасибо большое!!! Очень круто!
Но у меня одна фотография размером x, y, вторая х+1, у+1, третья х+2, у+1 и т.д
придется для каждой переписывать .pic ?

Последний раз редактировалось Belai; 24.07.2013 в 06:57.
Belai вне форума Ответить с цитированием
Старый 24.07.2013, 08:01   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Belai Посмотреть сообщение
Спасибо большое!!! Очень круто!
Но у меня одна фотография размером x, y, вторая х+1, у+1, третья х+2, у+1 и т.д
придется для каждой переписывать .pic ?
нет, сделайте через display: inline-block; размуры будут зависеть от картинки
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 25.07.2013, 10:51   #5
Belai
Новичок
Джуниор
 
Регистрация: 23.07.2013
Сообщений: 4
По умолчанию

ok! Сейчас попробую!)
Belai вне форума Ответить с цитированием
Старый 25.07.2013, 11:14   #6
Belai
Новичок
Джуниор
 
Регистрация: 23.07.2013
Сообщений: 4
По умолчанию

А нельзя им задавать позиционирование по данным x,y, а не автоматом?
Belai вне форума Ответить с цитированием
Старый 25.07.2013, 19:53   #7
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
{
  position:absolut;
  top: 20px;
  left: 20px;
}
и дисплей инлайн-блок уже не нужен, но придется вручную задавать размеры родительского окна, ибо блоки будут вырваны из потока
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в css из картинки сделать ссылку? vlad2423 HTML и CSS 14 25.07.2015 01:32
Затемнение с центровкой картинки WennY JavaScript, Ajax 6 04.10.2012 17:50
Затемнение картинки при наведении мыши qwerty55 Помощь студентам 2 05.12.2011 14:26
Можно ли ползать по коду с помощбю колесика? dsapa Microsoft Office Excel 10 19.06.2008 09:15