Сплывающая подсказка при наведении на картинку - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Сплывающая подсказка при наведении на картинку

workman

Воскресенье, 24 Сентября 2017, 14:18 | Сообщение 1

Проверенные

Сообщений:1716

Награды: 9

« 155 »

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

Сначала смотрим ДЕМО , потом задаем вопросы или предложения

CSS:

Код

.view-first img{-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;-ms-transition:all .2s linear;transition:all .2s linear}
.view-first .mask{-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;background-color:rgba(219,127,8,0.7);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.view-first h2{-webkit-transform:translateY(-100px);-moz-transform:translateY(-100px);-o-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px);-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.view-first p{-webkit-transform:translateY(100px);-moz-transform:translateY(100px);-o-transform:translateY(100px);-ms-transform:translateY(100px);transform:translateY(100px);-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;-ms-transition:all .2s linear;transition:all .2s linear}
.view-first:hover img{-webkit-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}
.view-first a.info{-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.view-first:hover .mask{-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}
.view-first:hover h2,.view-first:hover p,.view-first:hover a.info{-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-o-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}
.view-first:hover p{-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s}
.view-first:hover a.info{-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;-ms-transition-delay:.2s;transition-delay:.2s}
.view{width:300px;height:200px;margin:10px;float:left;border:10px solid #fff;overflow:hidden;position:relative;text-align:center;-webkit-box-shadow:1px 1px 2px #e6e6e6;-moz-box-shadow:1px 1px 2px #e6e6e6;box-shadow:1px 1px 2px #e6e6e6;cursor:default}
.view .mask,.view .content{width:300px;height:200px;position:absolute;overflow:hidden;top:0;left:0}
.view img{display:block;position:relative}
.view h2{text-transform:uppercase;color:#fff;text-align:center;position:relative;font-size:15px;padding:10px;background:rgba(0,0,0,0.8);margin:20px 0 0}
.view p{font-family:Georgia,serif;font-style:italic;font-size:12px;position:relative;color:#fff;padding: 3px 10px 0px;text-align:center}
.view a.info{display:inline-block;text-decoration:none;padding:7px 14px;background:#000;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 0 1px #000;-moz-box-shadow:0 0 1px #000;box-shadow:0 0 1px #000}
.view a.info: hover{-webkit-box-shadow:0 0 5px #000;-moz-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000}

HTML