Вид материалов на 2 колонки с эффектом наведение
|
|
Kosten | Пятница, 03 Ноября 2017, 14:26 | Сообщение 1 |
| Нашел в сети красивый эффект при наведение, на фотошоп сделал прицел по размерам, чтоб отлично подошел этот вид на игровую тематику. Сам он идет в темном виде и полный аналог его находится в каталоге файлов, что можете сравнить. Хотя дизайн аналогичен, только когда клик наводишь, появляется темно прозрачная штора и по центру изображение.
Можно поставить лупу или чтоб обозначало, что есть функция на увеличение, что на стал ставить. Так он полностью подходит на все гаджеты, и адаптивен на всю ширину монитора. Если по цветовой гамме немного не подходит, то в стилях можно редактировать как вам нужно, а точнее под основу интернет ресурса.
Так реально смотрится на разном размере.
1.
2.
3.
Код:
Код <div class="anaconda"> <div class="guardians-tab"> <div class="guardians-img"> <div class="sertukiman" style="background:url($IMG_URL1$) no-repeat;background-size: cover;"> <a href="$ENTRY_URL$"><div class="tumigsanubta"> <span class="munistyn"><img src="https://image.prntscr.com/image/4u0j1hNtSQKlFDubPGNUwA.png"></span> </div></a> </div> </div> <div class="guardians-right"> <h2 class="guardians-title"><p class="cobraephus"><a href="$ENTRY_URL$">$TITLE$</a></p></h2> <div class="guardians-det"> <span><i class="fa fa-eye"></i>$READS$</span> <span><a href="$COMMENTS_URL$"><i class="fa fa-comments"></i>$COMMENTS_NUM$</a></span> <span><a href="$PROFILE_URL$"><i class="fa fa-user-circle"></i>$AUTHOR_NAME$</a>$USERNAME$</span> <span><a href="$CATEGORY_URL$"><i class="fa fa-folder"></i>$CATEGORY_NAME$</a></span> </div> <div class="configuration"> <div class="guardians-short">$MESSAGE$</div> </div> </div> </div> </div>
CSS
Код .anaconda{ width: 48%; float:left; margin: 1px 0px 1px 9px; }
.guardians-tab{ display:block; width:100%; margin-bottom: 12px; background: rgb(43, 42, 42); border: 1px solid rgba(134, 132, 132, 0.98); border-radius: 6px 6px 3px 3px; box-shadow: 0px 3px 12px 0px rgba(148, 148, 148, 0.39), 0px 3px 18px 0px rgba(12, 12, 12, 0.09); }
.guardians-img, .guardians-right{ display:block; vertical-align:top; }
.guardians-right{ padding: 12px; }
.guardians-img{ width:100%; position:relative; box-shadow: 0px 3px 7px rgba(195, 189, 189, 0.31), 0px 3px 12px 0px rgba(0, 0, 0, 0.3); }
.guardians-det{ margin-top:10px; color: rgba(241, 240, 240, 0.98); font-size:13px; border-bottom: 1px solid rgba(104, 107, 111, 0.98); padding: 0px 0px 10px 2px; }
.guardians-det span{ margin-right:8px}
.guardians-det i{ margin-right:8px}
.guardians-det a{ color: rgba(249, 246, 246, 0.96); text-decoration:none; }
.guardians-title{ font-size:18px; padding-right:10%; margin:0px; border-bottom: 1px solid rgba(103, 103, 103, 0.98); padding: 0px 0px 9px 5px; }
.guardians-title a{ text-decoration:none; font-weight:bold}
.guardians-title2{ font-size:28px; font-weight:bold; margin:0px}
.guardians-short{ margin-top: 2px; line-height: 1.4em; }
.guardians-short2{ margin-top:30px; line-height:2em}
.guardians-over{ padding:30px; padding-bottom:40px}
.mardegulista-date span{ display:block; font-size: 12px; text-transform:lowercase; line-height:13px; margin-top:3px; }
.guardians-tab:hover .mardegulista-date{ background: rgba(14, 14, 14, 0.31); }
.configuration{ opacity: 0.9; margin-bottom: 0px; padding: 0 0px; height: 87px; overflow: hidden; text-align: justify; color: rgba(244, 245, 247, 0.98); font-size: 15px; font-family: PT Sans; }
.guardians-title a{ color: rgba(246, 253, 255, 0.96); font-size: 20px; overflow:hidden; font-family: PT Sans; font-weight: bold; }
.guardians-title a:hover{ color: rgba(206, 204, 202, 0.93); }
.cobraephus{ white-space: nowrap; overflow: hidden; padding: 3px; background: rgb(43, 42, 42); position: relative; margin: -5px 3px -3px -9px; }
.cobraephus::after{ content: ''; position: absolute; right: 0; top: 0; width: 70px; height: 100%; background: linear-gradient(to right, rgba(43, 42, 42, 0.1), rgb(43, 42, 42) 100%); }
.sertukiman { padding: 0px; height:210px; width: 100%; margin:0px; border-radius: 5px 5px 0px 0px; border-bottom: 1px solid #777a7d; } .tumigsanubta { background:rgba(0, 0, 0, 0.51); text-align:center; opacity:0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 5px 5px 0px 0px; }
.sertukiman:hover .tumigsanubta { opacity: 1; } .munistyn { position:relative; top:63px; }
@media screen and (max-width: 480px){ .guardians-det{ display: none!important; }
}
@media screen and (max-width: 780px){ .anaconda{ width: 100%; margin: 0px 10px 10px -3px; }
}
Вид материала исправлен и полностью доработан.
| [ RU ] |
| |
Kosten | Пятница, 03 Ноября 2017, 14:31 | Сообщение 2 |
| Но здесь тема выходит такая, если изображение небольшое, оно не растягивается.
Может кто в курсе как сделать, то отлично было, с красивым эффектом, что можно самому выставить по тематике, при наведение и отредактировать по центру.
| [ RU ] |
| |
-SAM- | Пятница, 03 Ноября 2017, 22:05 | Сообщение 3 |
| Kosten, такие виды материалов уже публиковали многократно, что вывод изображение так идёт - применяются свойства для масштабирования заднего фона, вот background-size: cover (пример).
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно. Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
| [ UA ] |
| |
Kosten | Суббота, 04 Ноября 2017, 12:09 | Сообщение 4 |
| Цитата -SAM- ( ) background-size: cover Ставил этот стиль, без изменений!
| [ RU ] |
| |
waak | Суббота, 04 Ноября 2017, 12:32 | Сообщение 5 |
| Цитата Kosten ( ) Ставил этот стиль, без изменений!
<div class="sertukiman" style="background:url($IMG_URL1$) no-repeat;background-size: cover;">
| [ RU ] |
| |
Kosten | Суббота, 04 Ноября 2017, 13:03 | Сообщение 6 |
| waak, все отлично выводит сейчас, но теперь можно и что то тематическое поставить, вместо при цела, хотя и он под игровую тематику идет.
| [ RU ] |
| |
-SAM- | Суббота, 04 Ноября 2017, 13:21 | Сообщение 7 |
| Kosten, куда ставили? Инлайн-стили пихать в вид материалов - не лучший ход, вот класс .sertukiman и соответственно в него дописывать нужно -> background-size: cover !important;
Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно. Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
| [ UA ] |
| |
Kosten | Суббота, 04 Ноября 2017, 13:58 | Сообщение 8 |
| -SAM-, но и для этого тема, что есть ответы, и здесь сам каждый решит, просто если бы закидывал на главную, то сделал через стили, то этот вид в 3 форматах уже присутствует, а под один эффект не думаю что нужно, но просто хотелось узнать, как эту проблему решить, что теперь знаю, и надеюсь другие узнают.
| [ RU ] |
| |