Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как осуществить затемнение постера при наведении курсора?

Как осуществить затемнение постера при наведении курсора?

     30.04.2016    Все вопросы » Стили (CSS)    2068

вопрос
Испробовав десяток методов по затемнению постера у меня так и нечего не получилось... На сайте Megogo очень красиво осуществили эту задумку, но не могу этого повторить самостоятельно(((
Помогите осуществить затемнение постера, вот код http://codepen.io/karensarkisyan/pen/RaqwLL
Если можно, чтобы получилось как на сайте мегого))) Заранее благодарочка)))

13 комментариев

baseroad
Юзер

baseroad - 30 апреля 2016 21:06 -

Да, все как я и хотел)))) А как сделать, чтобы они в ширину по 3 были и с равными промежутками? http://base-road.ru/teplovozu.html
WIGGO
Юзер

WIGGO - 30 апреля 2016 21:11 -

меняйте ширину
baseroad
Юзер

baseroad - 30 апреля 2016 23:19 -

Столкнулся с проблемкой... Раньше постеры я загружал через дополнительное поле "тип: одна строка", а сейчас "тип: Загружаемое изображение" в итоге пришлось создать новое доп. поле и выводить все вот таким образом:
<div class="wrap">
  <div class="blackout"></div>
[full-link][xfnotgiven_image2][xfgiven_image]<img  class="poster" src="[xfvalue_image]" alt="{title}">[/xfgiven_image][/xfnotgiven_image2][/full-link]
    [full-link][xfgiven_image2]<span class="poster">[xfvalue_image2]</span>[/xfgiven_image2][/full-link]
<img  class="stripes" src="http://base-road.ru/img/featured-shadow-long.png">
  <div class="title">
    [full-link]{title}[/full-link]
  </div>
</div>

Суть проблемы. Изображение выведенное через новое доп. поле оформляеться не так как другие (по старому доп. полю).... Помогите решить проблему пожалуйста... Слева выведенный пост через новое доп. поле, а справа через старое...
WIGGO
Юзер

WIGGO - 1 мая 2016 05:45 - 

.poster img{
  width:300px;
  height:168px;
  border-radius:2px;
margin-bottom:-4px;
  }
попробуйте так
baseroad
Юзер

baseroad - 1 мая 2016 10:53 -

Цитата: WIGGO
.poster img{
  width:300px;
  height:168px;
  border-radius:2px;
margin-bottom:-4px;
  }
попробуйте так

Неа, все скрывилось(( Может сам код я не правильно написал? Вот на этой странице код использую
<div class="wrap">
  <div class="blackout"></div>
[full-link][xfnotgiven_image2][xfgiven_image]<img  class="poster" src="[xfvalue_image]" alt="{title}">[/xfgiven_image][/xfnotgiven_image2][/full-link]
    [full-link][xfgiven_image2]<span class="poster">[xfvalue_image2]</span>[/xfgiven_image2][/full-link]
<img  class="stripes" src="http://base-road.ru/img/featured-shadow-long.png">
  <div class="title">
    [full-link]{title}[/full-link]
  </div>
</div>
WIGGO
Юзер

WIGGO - 1 мая 2016 11:01 -

что там искривилось?

upd все, нашел

пробуйте так

.poster img{
  width:300px!important;
  height:168px!important;
  border-radius:2px;
margin-bottom:-4px;
  }
baseroad
Юзер

baseroad - 1 мая 2016 11:08 -

Черный поезд выводиться по новому типо доп. поля, а остальные по старому и тег <h3> сместился
baseroad
Юзер

baseroad - 1 мая 2016 13:33 -

Цитата: WIGGO
что там искривилось?

upd все, нашел

пробуйте так

.poster img{
  width:300px!important;
  height:168px!important;
  border-radius:2px;
margin-bottom:-4px;
  }

Изображение стало на место, а вот тег h3 "Маневровые" почему-то на место не вернулся(( И как сделать, чтобы изображение вело на полную новость при клике? Вывел вот так, но не работает
[xfgiven_image2]<span class="poster">[full-link][xfvalue_image2][/full-link]</span>[/xfgiven_image2]
WIGGO
Юзер

WIGGO - 1 мая 2016 17:30 -

Блок blackout оберните в этот тег
baseroad
Юзер

baseroad - 1 мая 2016 21:34 -

А не подскажите как сделать адаптивность этого блока?
WIGGO
Юзер

WIGGO - 2 мая 2016 05:24 -

Слишком много вопросов))
baseroad
Юзер

baseroad - 30 апреля 2016 21:12 -

WIGGO,
буду пробовать))) Спасибо за помощь!)))
baseroad
Юзер

baseroad - 2 мая 2016 11:02 -

Цитата: WIGGO
Слишком много вопросов))

Это будет последний)))) Помогите плиз)
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 16.07.2012 wcw2007  Стили (CSS)
 15.05.2013 lsdoptom  Стили (CSS), jQuery
 25.05.2013 bagus  Шаблоны (TPL), Стили (CSS)
 01.08.2013 sidorivan  Шаблоны (TPL), Стили (CSS)
 04.12.2013 xeon01  Стили (CSS), jQuery
 22.02.2014 steamen  Стили (CSS), jQuery, Ламерские вопросы
 02.09.2014 249893  Стили (CSS), Общие вопросы по PHP
 08.01.2016 dimavdv  Стили (CSS)
 10.03.2016 ask3d  Шаблоны (TPL), Стили (CSS), Общие вопросы по PHP
 16.04.2016 COCAINE  Общие вопросы по вёрстке, Стили (CSS)
  • mondolfo | Как вывесит в comments.tpl картинку с но ... 7
    Фото mondolfo
    mondolfo
    Как вывесит в comments.tpl картинку с новости?
    Вчера, 23:42
    кто-нибудь решил эту?
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 17:08
    Разъясните как вытащить id?
  • lutskboy | Вытащить все данные из определенного доп ... 1
    Фото lutskboy
    lutskboy
    Вытащить все данные из определенного доп поля?
    22-11-2024, 16:17
    в adminer можно.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 16:14
    выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
    js скрипт можно написать
    
<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 14:39
    Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 13:52
    где выводить? админка или сайт
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    21-11-2024, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
наверх