Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
1

Подскажите, пожалуйста

24.02.2014, 18:38. Просмотров 310. Ответов 7
Метки нет (Все метки)

Здравствуйте!
Подскажите, пожалуйста, у меня, есть 4 блока 500х1000px, как сделать что бы на странице в нормально состоянии они были обрезаны 500х500 а полностью ”открывалась” только при наведении мыши?
Как то так:
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.02.2014, 18:38
Ответы с готовыми решениями:

Подскажите пожалуйста
Подскажите пожалуйста как набраться опыта в верстке PSD макетов и просто в...

Подскажите,пожалуйста
Здравствуйте! У меня проблема ,(блок увеличивается от команды padding) только...

Подскажите пожалуйста
Делаю разметку для интернет магазина,первый день в css. Как передвинуть нижний...

Подскажите пожалуйста
Всем доброго дня. Сейчас тренируюсь в создании сайтов. Ориентируюсь на...

Подскажите пожалуйста с input
Подскажите как сделать что бы при нажатии на input текст внутри поля анимацией...

7
Academik
659 / 439 / 171
Регистрация: 04.04.2013
Сообщений: 1,914
24.02.2014, 20:56 2
Ссылка на картинку битая. Предварительно нати вам:
CSS
1
2
.block{width: 500px; height: 500px;}
.block:hover{width: 500px; height: 1000px;}
0
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
24.02.2014, 21:07  [ТС] 3
35cm,
спасибо, а как сделать что б наведенный блок был поверх вех других блоков (position:absolute; не помогает)
З.Ы. вот правильная ссылка на картинку
0
Academik
659 / 439 / 171
Регистрация: 04.04.2013
Сообщений: 1,914
24.02.2014, 21:09 4
Загрузите на форум скриншот и код css/html.
0
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
24.02.2014, 21:30  [ТС] 5
Вот код:

HTML5
1
2
3
4
5
6
<div class="wrap">  
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
CSS
1
2
3
.wrap{width:1100px;}
.block{width: 500px; height: 500px; position:absolute; display:inline-block;}
.block:hover{width: 500px; height: 1000px;}
0
БогданVB
3 / 3 / 0
Регистрация: 25.10.2013
Сообщений: 41
24.02.2014, 21:45 6
z-index + position:relative
0
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
24.02.2014, 22:07  [ТС] 7
БогданVB,
Не получается - http://jsfiddle.net/KUgVD/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="wrap">  
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
                                                                                    
        </div>
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
 
        </div>
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
 
        </div>
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
 
        </div>
    </div>
CSS
1
2
3
.wrap{width:700px; background:#f6f6f6;}
.block{width: 300px; height: 300px; position:relative; z-index:99; border:1px solid #0FF; display:inline-block;}
.block:hover{width: 300px; height: 1000px;}
 Комментарий администратора 
Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
0
Academik
659 / 439 / 171
Регистрация: 04.04.2013
Сообщений: 1,914
25.02.2014, 00:44 8
stan07, как вариант можно так сделать:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="wrap">  
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="clr"></div>
</div>
CSS
1
2
3
4
5
.wrap{width:640px;}
.col{position: relative; top: 0; width: 280px; float: left; margin: 10px;}
.block{border:1px solid #000; width: 280px;}
.block:hover{position: absolute; top: 0; left: 0; width: 280px; height: 370px; background: #dfdfdf; z-index: 10;}
.clr{clear: both;}
http://jsfiddle.net/KUgVD/3/
0
25.02.2014, 00:44
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.02.2014, 00:44

Подскажите пожалуйста с прокруткой на сайт
Здравствуйте, подскажите как мне сделать прокрутку ( скроллинг ) на сайт,...

Мастера, подскажите новичку пожалуйста
Приветствую форумчане. Буквально месяц назад начал изучать html и css абсолютно...

Подскажите, пожалуйста, нормально ли сверстал?
Веб ссылка - http://b-games.hol.es/ И ссылка на исходники с псдшником -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru