0 Пользователей и 1 Гость просматривают эту тему.
  • 10 Ответов
  • 4585 Просмотров
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Здравствуйте ребята. Хочу сделать меню на главной странице сайта в виде картинок которые при наведении сменяются текстом. Должна получится своего рода плитка с анимацией. Но, возникла проблема: плитки (элементы) размещаются один под одним, а нужно с лева на право (горизонтально).

ВОПРОС:  как эти элементы разместить в горизонтальном порядке? И еще нужно чтоб на малых экранах (смартфонах) они спрыгивали вниз (в зависимости от ширины экрана). Помогите пожалуйста разобраться... !

Код HTML:
Код
<div>
<figure>
 <img src="http://rybalc1n.bget.ru/images/logos_menu/auto.png">
 <figcaption>
  <h2>АВТО</h2>
   <p><a href="#">Автомойки</a></p>
   <p><a href="#">Автосалоны</a></p>
   <p><a href="#">Автосервисы</a></p>
   <p><a href="#">Автостайлинг</a></p>
   <p><a href="#">Автостоянки</a></p>
   <p><a href="#">Автошколы</a></p>
  <a href="#">Ссылка »</a>
 </figcaption>
</div>
<div><figure>
 <img src="http://rybalc1n.bget.ru/images/logos_menu/perevozki.png">
 <figcaption>
  <h2>ПЕРЕВОЗКИ</h2>
   <p><a href="#">Пасажирские</a></p>
   <p><a href="#">Грузовые</a></p>
   <a href="#">Ссылка »</a>
 </figcaption>
</div>

Код CSS:
Код
figure {
width: 200px;
height: 200px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

figure figcaption,
figure figcaption img{
width: 200px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;

-moz-transform:    translateX(-350px);
-o-transform:      translateX(-350px);
-webkit-transform: translateX(-350px);
transform:         translateX(-350px);
 
visibility:hidden; 

-webkit-transition: all 0.4s ease-out;
   -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
     -o-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
}

figure img {
display: block;
position: relative;
   
-webkit-transition: all 0.4s ease-out;
   -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
     -o-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
}

figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 25px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}

figure p {
font-size: 18px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;
   
-webkit-transition: all 0.4 ease-out;
   -moz-transition: all 0.4 ease-out;
    -ms-transition: all 0.4 ease-out;
     -o-transition: all 0.4 ease-out;
        transition: all 0.4 ease-out;
}

figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}

figure a:hover {
color: #E88F00;   
border-bottom: 1px dotted #9F1D35;
}

figure:hover figcaption,
figure:hover figcaption img{
-moz-transform:    translateX(0);
-o-transform:      translateX(0);
-webkit-transform: translateX(0);
transform:         translateX(0);
visibility:visible;
}

figure:hover img {
-moz-transform:    translateX(350px);
-o-transform:      translateX(350px);
-webkit-transform: translateX(350px);
transform:         translateX(350px);
}

figure:hover p{
opacity: 1;
}   
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Добавь
Код: css
figure p {
display: inline-block;
Почитай http://htmlbook.ru/content/blochnye-elementy
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
К сожалению не помогло... Я думаю тут нужно в HTML что-то править.
*

umbabaraumba

  • Живу я здесь
  • 2415
  • 153 / 1
  • если помог можете поставить +
У вас верстка Неправильная.
Сначала идет figure в котором одна картинка, а потом div внутри которого опять figure с другой картинкой
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Забыть о табличной верстке! (убрал)
Код: css
figure {
display: inline-block;
    float: left;}
http://bit.ly/1G85mx5
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Спасибо Вам ОГРОМНОЕ, ShfVD! Проблема полностью решена! очень Вам благодарен, что нашли время! С меня "+".  :D
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Подскажите пожалуйста, можно ли сделать так, чтоб анимация происходила не при наведении мышки, а при клике? Очень нужно...
*

umbabaraumba

  • Живу я здесь
  • 2415
  • 153 / 1
  • если помог можете поставить +
Подскажите пожалуйста, можно ли сделать так, чтоб анимация происходила не при наведении мышки, а при клике? Очень нужно...
На jQuery можно так сделать, тут есть примеры
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
К сожалению не нашел у себя того примера, навскидку - попробовать :hover заменить на Псевдокласс :active
(http://htmlbook.ru/css/active)
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Здравствуйте. Подскажите пожалуйста, как сделать так чтоб блоки выравнивались на странице по центру так как это сделано в этом шаблоне: http://www.rudebox.org.ua/demo/as-create-adaptive-template-site-css3/  На своем сайте я не могу так сделать: http://rybalc5n.bget.ru/index.php/ru/ Дело в том, что мои блоки выравниваются ВЛЕВО, а нужно ПО ЦЕНТРУ и в зависимости от разрешения экрана должны "спрыгивать" вниз. Очень нужно. Помогите мне пожалуйста.
*

rubinded

  • Захожу иногда
  • 54
  • 0 / 0
Нашел решение  :D Эффективнее всего это реализовать через сетку Bootstrap. Кому нужна более подробная консультация пишите, с радостью помогу.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

[Решено] title материалов и категорий без пунктов меню

Автор pharaoh

Ответов: 269
Просмотров: 58904
Последний ответ 03.02.2022, 02:45:26
от globus812
Как добавить описание к пункту меню в Joomla 2.5? (Как у материалов)?

Автор nia

Ответов: 7
Просмотров: 5385
Последний ответ 29.03.2021, 12:10:26
от sivers
В моб версии не откриваються норм меню

Автор umsbeauty

Ответов: 0
Просмотров: 1194
Последний ответ 11.01.2021, 17:55:15
от umsbeauty
Убрать название пункта меню из URL материала

Автор fortuner

Ответов: 15
Просмотров: 8151
Последний ответ 31.10.2020, 00:46:04
от spas
Проблемка с правым меню

Автор V_V

Ответов: 3
Просмотров: 1405
Последний ответ 03.12.2019, 06:24:56
от Vovolsort