Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
1

Как сделать подобный эффект?

08.03.2014, 01:31. Показов 1202. Ответов 17
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Доброе время суток, подскажите пожалуйста, как можно реализовать подобный эффект при наведении мышкой? Просто вообще не знаю с какой стороны к этому эффекту подходить.
Миниатюры
Как сделать подобный эффект?   Как сделать подобный эффект?  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 08.03.2014, 01:31
Ответы с готовыми решениями:

Как сделать подобный эффект ?
http://jsfiddle.net/0m4c9f8b/ Как сделать так,чтобы данный эффект был не при hover'е.

Как сделать подобный эффект ?
есть border-bottom, нужно так, чтобы он растекался с центра до конца, помогите....

Как сделать подобный эффект шапке сайта?
Всем доброго времени суток! Хотелось бы узнать, как сделать эффект сжатия шапки при скроллинге, как...

Как сделать подобный див?
Как так сделать, чтобы див не завершал свое существование при переходе на следующую строку,...

17
15 / 15 / 7
Регистрация: 08.04.2012
Сообщений: 133
08.03.2014, 03:56 2
тут скрипт скорее всего используется, а если нет, то можно попробовать как выпадающее меню, только немного наоборот
0
Эксперт JSЭксперт HTML/CSS
2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525
08.03.2014, 06:42 3
Цитата Сообщение от wao_138 Посмотреть сообщение
как можно реализовать подобный эффект при наведении мышкой?
Наводить то куда нужно? на картинку или на текстовый блок.

На правом скрине виден дефект, текстовый блок уже картинки, не кошерно это.
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
08.03.2014, 12:21  [ТС] 4
Цитата Сообщение от newJS Посмотреть сообщение
Наводить то куда нужно? на картинку или на текстовый блок.
Когда наводишь на весь блок (текст и картинка).

Цитата Сообщение от newJS Посмотреть сообщение
На правом скрине виден дефект, текстовый блок уже картинки, не кошерно это.
то я криво вырезал, то кусочек с другого блока влез )
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
08.03.2014, 14:53 5
Анимация (:hover и transition) свойств абсолютного позиционирования .
1
25 / 25 / 9
Регистрация: 18.09.2011
Сообщений: 130
08.03.2014, 20:01 6
HTML5
1

<div id="main">Some text<div id="footer">Some text</div</div>
CSS
1
2
3
4

#main{position:relative}
#footer{display:none;position:absolute; bottom:30px;height:30px}
 
#main:hover #footer{display:block}
Как-то так на чистом CSS.
1
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
09.03.2014, 23:54  [ТС] 7
Цитата Сообщение от troayn32 Посмотреть сообщение
Код HTML5
<div id="main">Some text<div id="footer">Some text</div</div>
Код CSS

#main{position:relative}
#footer{display:none;position:absolute; bottom:30px;height:30px}
#main:hover #footer{display:block}
Как-то так на чистом CSS.
Спасибо!

Добавлено через 36 секунд
Цитата Сообщение от monochromer Посмотреть сообщение
Анимация (:hover и transition) свойств абсолютного позиционирования .
Можно пример? Пожалуйста.
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
10.03.2014, 01:45 8
Лучший ответ Сообщение было отмечено wao_138 как решение

Решение

Цитата Сообщение от wao_138 Посмотреть сообщение
Можно пример? Пожалуйста.
Пример - http://jsbin.com/taviyoye/1/edit?html,css,output
HTML5
1
2
3
4
5
6
7
8
9

<div class="block">
    <img src="http://lorempixel.com/200/400" alt="lorempixel.com">
    <div class="info">
        <h2>Lorem ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nostrum!</p>
        <time datetime="2014-03-03">2014-03-03</time>
        <div class="icon fa fa-eye">345</div>
    </div>
</div>
CSS
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

*{margin: 0;padding: 0;}
 
html{
  font: 62.5% Arial;
}
/***************************************/
.block{
  width: 200px;
  height: 400px;
  position: relative;
  overflow: hidden;
}
/***************************************/
.block img{
  position: absolute;
  max-width: 100%;
  height: auto;
}
/***************************************/
.info{
  position: absolute;
  color: #333;
  background: rgba(255,255,255,.7);
  bottom:-40px;
  
  transition: bottom .6s ease;
}
.info h2{
  font-size: 1.8em;
  text-align: center;
  padding: .8em;
}
.info p{
  font-size: 1.4em;
  padding: .8em;
  display: none;
  overflow: hidden;
}
.info time{
  display: block;
  font-size: 1.2em;
  padding:.5em;
}
.info .icon{
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 1.4em;
  display: inline-block;
  text-align: center;
  /* vertical-align: middle; */
}
/***************************************/
.block:hover .info{
  bottom:0;
}
.block:hover p{
  display: block;
}
1
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
11.03.2014, 18:49  [ТС] 9
Цитата Сообщение от monochromer Посмотреть сообщение
Пример...
Спасибо большое!
Всем спасибо.

Добавлено через 17 часов 10 минут
monochromer, еще вопрос.
Можно ли сделать, чтобы блок был под картинкой, в не над ней? и при наведении он заходил уже на картинку.

Добавлено через 11 минут
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

<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="block">
    <img src="http://lorempixel.com/240/240" alt="lorempixel.com">
   <div class="info">
      <div>
        <h2>Lorem ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nostrum!</p>
        <time datetime="2014-03-03">2014-03-03</time>
        <div class="meta">
          <div class="icon fa fa-eye">345</div>
        </div>
      </div>
   </div>
  </div>
  
</body>
</html>
CSS
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

*{margin: 0;padding: 0;}
 
html{
  font: 62.5% Arial;
}
/***************************************/
.block{
    width: 240px;
    height: 360px;
    overflow: hidden;
}
/***************************************/
.block img{
    display: block;
    position: absolute;
    background-size: cover;
    background-position: 50% 0;
}
/***************************************/
.info {
    left: 0;
    -webkit-box-shadow:0 -4px 8px rgba(50, 50, 50, 0.18);
    -moz-box-shadow:0 -4px 8px rgba(50, 50, 50, 0.18);
    box-shadow:0 -4px 8px rgba(50, 50, 50, 0.18);
    position: absolute;
    background-color: #f7f7f7;
}
 
.info:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7f7f7;
    position: absolute;
    top: -6px;
    left: 50px;
}
 
.info {
  bottom: -100px;
  -moz-transition: bottom .4s ease;
  -o-transition: bottom .4s ease;
  -webkit-transition: bottom .4s ease;
}
 
.info > div {
  width: 240px;
  height: 220px;
}
 
.info > div h2{
  font-size: 1.8em;
  padding: .8em;
}
 
.info > div p{
    display: none;
    font-size: 13px;
    color: #555;
    padding: 11px 0 0 0;
    overflow: hidden;
}
.info > div time{
  display: block;
  font-size: 1.2em;
  padding:.5em;
}
 
.info > div .meta {
  display: none;
  overflow: hidden;
}
.info > div .icon{
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 1.4em;
  display: inline-block;
  text-align: center;
  /* vertical-align: middle; */
}
/***************************************/
.block:hover .info{
  bottom:0;
}
.block:hover p{
  display: block;
}
.block:hover .meta{
  display: block;
}
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
11.03.2014, 19:46 10
wao_138, сделать-то можно. Но тут надо прояснить несколько вещей.
Чтобы заставить работать CSS-анимации (transition), многие размеры должны быть фиксированными. Например, придется обрезать текст в описании. Всякие трюки вроде height:auto или 100%, как правило, не работают.

Но тем не менее, вот - http://jsbin.com/duboh/1/edit
Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="block">
    
    <img src="http://lorempixel.com/240/360" alt="lorempixel.com">
    
    <div class="info">
      <div>
 
        <h2>Lorem ipsum dolor.</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nostrum!</p>
        <time datetime="2014-03-03">2014-03-03</time>
        
        <div class="meta">
          <div class="icon fa fa-eye">345</div>
        </div>
         
      </div>
    </div>
    
  </div>
CSS
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

*{margin: 0;padding: 0;}
 
html{
  font: 62.5% Arial;
}
/***************************************/
.block{
    width: 240px;
    height: 360px;
    position: relative;
    overflow: hidden;
}
/***************************************/
.block img{
    display: block;
    position: absolute;
    /* background-size: cover; */
    /* background-position: 50% 0; */
}
/***************************************/
.info {
    left: 0;
    -webkit-box-shadow:0 -4px 8px rgba(50, 50, 50, 0.18);
    -moz-box-shadow:0 -4px 8px rgba(50, 50, 50, 0.18);
    box-shadow:0 -4px 8px rgba(50, 50, 50, 0.18);
    position: absolute;
    top:100%; 
    background-color: #f7f7f7;
  
   -moz-transition: top .4s ease;
   -o-transition: top .4s ease;
   -webkit-transition: top .4s ease;
}
 
.info:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7f7f7;
    position: absolute;
    top: -6px;
    left: 50px;
} 
 
.info > div {
  width: 240px;
  height: 220px;
}
 
.info > div h2{
  font-size: 1.8em;
  padding: .8em;
}
 
.info > div p{
    display: none;
    font-size: 13px;
    color: #555;
    padding: 11px 0 0 0;
    overflow: hidden;
}
.info > div time{
  display: block;
  font-size: 1.2em;
  padding:.5em;
}
 
.info > div .meta {
  display: none;
  overflow: hidden;
}
.info > div .icon{
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 1.4em;
  display: inline-block;
  text-align: center;
  /* vertical-align: middle; */
}
/***************************************/
.block:hover .info{
  top:40%;
}
.block:hover p{
  display: block;
}
.block:hover .meta{
  display: block;
}
1
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
12.03.2014, 01:42  [ТС] 11
monochromer, ок, постараюсь учесть, спасибо еще раз!

Добавлено через 4 минуты
monochromer, а можно ли как-то вывести заголовок? но, чтобы он не налазил на картинку.
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
12.03.2014, 11:12 12
Попробуйте сместить top. Например, поставить значение 75%. Но, как я говорил, все это может поломаться, если у Вас будет меньше-больше текста.
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
12.03.2014, 17:22  [ТС] 13
Цитата Сообщение от monochromer Посмотреть сообщение
Попробуйте сместить top. Например, поставить значение 75%.
он тогда на картинку накладываться.
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
12.03.2014, 17:33 14
Вам проще нарисовать, как должен выглядеть эффект - что должно накладываться, что не должно, как должно.
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
12.03.2014, 21:31  [ТС] 15
monochromer, ну как на скринах главного поста, там на картинку накладывается блок только при наведении, а так он ниже нее расположен.
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
12.03.2014, 21:49 16
Лучший ответ Сообщение было отмечено wao_138 как решение

Решение

До простят меня верстальщики проекта YouGoTo.ru...
Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<article class="block vertical">
  <div class="ico-oview"></div>
  <a class="image" href="/article/listing/10-must-see-mest-v-nyu-yorke">
    <img src="http://www.yougoto.ru/upload/article/190/9e5b947a65c34f43f3badac4311ca1fb.jpg" alt="10 must-see мест в Нью-Йорке">
  </a>
  <div class="section grid240x220">
    <div>
      <div class="route">
        <a href="/article/listing">Обзоры</a>
      </div>
      <a class="title" href="/article/listing/10-must-see-mest-v-nyu-yorke">10 must-see мест в Нью-Йорке</a>
      <a class="description" href="/article/listing/10-must-see-mest-v-nyu-yorke">Достопримечательности, которые обожают местные жители</a>
      <div class="date">13 февраля 2014&nbsp;г.</div>
    </div>
    <div class="info">
      <div><span class="icon-blue-viewed"></span>2828</div>
      <div><span class="icon-blue-comment"></span>0</div>
    </div>
  </div>  
</article>
CSS
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

*{margin: 0;padding: 0;}
*,*:before,*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
article.block {
    position: relative;
    float: left;
    overflow: hidden;
    border:1px solid #ccc;
}
article.block > a.image {
    display: block;
    position: absolute;
    background-size: cover;
    background-position: 50% 0;
}
article.block > div.section {
    position: absolute;
    background-color: #f7f7f7;
}
article.block > div.section .title{
    display: block;
    font-size: 15px;
    font-family: FuturaDemi, Arial, sans-serif;    
    -webkit-font-smoothing: antialiased; 
    margin-top: 9px;
    line-height: 18px;
    color: #212121;
    text-transform: uppercase;
    word-wrap: break-word;
}
article.block > div.section a:hover.title {
    color: #00898f;
}
article.block.big > div.section .route a:hover,
article.block.big > div.section a:hover,
article.block.big > div.section .route {
    color: #fff;
    text-overflow: ellipsis;
}
article.block > div.section a:hover{
    text-decoration: none;
}
article.block > div.section .route{
    display: block;
    font-size: 14px;
    font-family: FuturaBook, Arial, sans-serif;
    margin-top: 7px;
    color: #444;
    clear: both;
}
article.block > div.section .route a{
    color: #444;
}
article.block > div.section .route a:hover{
    color: #00898f;
}
article.block > div.section .date{
    font-size: 12px;
    font-family: APCGaramond, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin-top: 10px;
    color: rgba(33, 33, 33, .67);
}
/* Vertical block */
article.block.vertical {
    width: 220px;
    height: 360px;
    overflow: hidden;
}
.grid240x220{
  width: 220px;
  height: 240px;
}
article.block.vertical > div.section {
    left: 0;
    -webkit-box-shadow: 0 -4px 8px rgba(50, 50, 50, 0.18);
    -moz-box-shadow:    0 -4px 8px rgba(50, 50, 50, 0.18);
    box-shadow:         0 -4px 8px rgba(50, 50, 50, 0.18);
}
article.block.vertical > div.section:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7f7f7;
    position: absolute;
    top: -6px;
    left: 22px;
}
article.block.vertical > div.section > div {
    padding: 11px 18px;
}
article.block.vertical > div.section div.info {
    font-family: FuturaDemi, Arial, sans-serif;    
    -webkit-font-smoothing: antialiased; 
    color: #fff;
    background-color: #00b2b7;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 22px 5px 22px;
}
article.block.vertical > div.section div.info > div {
    display: inline-block;
}
article.block.vertical > div.section div.info > div:first-child {
    margin: 0 16px 0 0;
}
/****** Animation ***********/
article.block.vertical > div.section.grid240x220 .description {
    display: none;
    font-size: 13px;
    color: #555;
    padding: 11px 0 0 0;
    /*-moz-transition: height .5s ease;*/
    /*-o-transition: height .5s ease;*/
    /*-webkit-transition: height .5s ease;*/
}
article.block.vertical > div.section.grid240x220 {
    bottom: -100px;
    -moz-transition: bottom .4s ease;
    -o-transition: bottom .4s ease;
    -webkit-transition: bottom .4s ease;
}
article.block.vertical:hover > div.section.grid240x220 {
    bottom: 0;
}
article.block.vertical > div.section.grid240x120 {
    bottom: 0;
}
article.block.vertical:hover > div.section.grid240x220 .description {
    display: block;
}
/***************************** Icons ***************************/
.info {
    font-size: 11px;
}
.ico-oview {
    background-image: url("http://www.yougoto.ru/assets/f0e796e0/image/design/ico-coll.png");
    background-position: -2px -86px;
    width:31px;
    height: 31px;
    position: absolute;
    top:10px;
    left:10px;
    z-index: 10;
}
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 15px;
    height: 14px;
    line-height: 14px;
    vertical-align: text-bottom;
    background-repeat: no-repeat;
    background-image: url("http://www.yougoto.ru/assets/f0e796e0/image/design/ico-coll.png");
    margin: 0 5px 0 0;
}
[class^="icon-blue-"], [class*=" icon-blue-"] {
    background-image: url("http://www.yougoto.ru/assets/f0e796e0/images/blue_icon.png");
}
[class^="icon-black-"], [class*=" icon-black-"] {
    background-image: url("../images/black_icon.png");
}
.icon-viewed, .icon-grey-viewed, .icon-black-viewed, .icon-blue-viewed {
    background-position: 0 0;
}
.icon-comment, .icon-grey-comment, .icon-black-comment, .icon-blue-comment {
    background-position: -15px 0;
}

Также можно посмотреть здесь http://cssdeck.com/labs/full/1vk7ivo3
1
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
13.03.2014, 02:50  [ТС] 17
monochromer, спасибо!
0
Администратор
12268 / 5333 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
13.03.2014, 10:17 18
wao_138, одна тема - один вопрос. Для каждого вопроса создавайте новую тему.
0
13.03.2014, 10:17
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 13.03.2014, 10:17
Помогаю со студенческими работами здесь

Как сделать подобный border?
Доброй ночи. Пытаюсь сделать подобный border То есть, с одной стороны с градинтом, с другой - нет....

Как сделать эффект зеркальности ?
Как сделать эффект зеркальности ? например diva

Как сделать такой эффект
Где можно скачать подобный эффект: http://www.cosmos-web.ru/ движущиеся изображения в квадратиках.

Как сделать такой эффект ?
Привет всем! Есть такой пример( картинка прикреплена) . Подскажите кто-нибудь как такой эффект...


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

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru