Меню с картинками на чистом CSS в строчку

  • 10 Ответов
  • 2263 Просмотров

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

*

rubinded

  • ***
  • 34
  • 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

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

*

rubinded

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

*

umbabaraumba

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

*

ShfVD

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

*

rubinded

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

*

rubinded

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

*

umbabaraumba

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

*

ShfVD

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

*

rubinded

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

*

rubinded

  • ***
  • 34
  • 0
Нашел решение  :D Эффективнее всего это реализовать через сетку Bootstrap. Кому нужна более подробная консультация пишите, с радостью помогу.