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

rubinded

  • Осваиваюсь на форуме
  • 39
  • 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

  • Осваиваюсь на форуме
  • 39
  • 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

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

rubinded

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

umbabaraumba

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

ShfVD

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

rubinded

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

rubinded

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

Проблемка с правым меню

Автор V_V

Ответов: 3
Просмотров: 510
Последний ответ 03.12.2019, 06:24:56
от Vovolsort
Горизонтальное меню

Автор friz

Ответов: 4
Просмотров: 648
Последний ответ 19.09.2018, 08:10:17
от Ysdsogina
[Решено] title материалов и категорий без пунктов меню

Автор pharaoh

Ответов: 264
Просмотров: 47844
Последний ответ 05.06.2018, 08:04:17
от Михаил web
[FAQ] Первый пункт главного меню в многоязычном сайте на Joomla 1.6/1.7

Автор ZHart

Ответов: 65
Просмотров: 72967
Последний ответ 21.02.2018, 16:06:52
от Alchanu
Теги в пункте меню

Автор ORTODOX

Ответов: 2
Просмотров: 1066
Последний ответ 25.04.2017, 23:57:20
от voland