- 15, May 2024
- #1
Всем привет,
Как вы можете видеть по этой скрипте, все работает отлично, за исключением того, что мне бы хотелось, чтобы синий цвет позади текста, который отображается при наведении, покрывал весь значок (т.е. до тех пор, пока не начнется прозрачность)
Есть идеи?
Спасибо
HTML
<метка for="modal_2">
фоновое изображение: URL (http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);
размер фона: обложка; верх: 0; слева: 0;">
Привет, мир
CSS
a.img-hover:hover {
-webkit-filter: drop-shadow(0px 0px 10px #00F);
фильтр: тень (0px 0px 10px #00F);
}
#bg1 {
ширина: 90вмин;
высота: 90вмин;
маржа: 0 авто;
-webkit-filter: размытие (50 пикселей);
фильтр: размытие (50 пикселей);
размер фона: обложка;
-webkit-animation: резкость 4с;
анимация: резкость 4с;
-webkit-animation-delay: 0 с;
задержка анимации: 0 с;
-webkit-animation-fill-mode: вперед;
режим анимации-заполнения: вперед;
}
#bg1::after {
содержание: '';
-webkit-animation: предварительная загрузка 1 с;
анимация: предварительная загрузка 1 с;
-webkit-animation-delay: 1 с;
задержка анимации: 1 с;
}
@-webkit-keyframes предварительно загружает{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png
)} } Предварительная загрузка @keyframes{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png
)} } @-webkit-keyframes повышает резкость{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter
lur(20px);filterlur(20px
)} 100%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filterlur(0px);filterlur(0px
)} } @keyframes повышает резкость{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filterlur(20px);filterlur(20px
)} 100%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filterlur(0px);filterlur(0px
)} }
/*Разделы изотопов */
.элемент {
размер шрифта: 8pt;
выравнивание текста: по ширине;
плыть налево;
ширина: 332 пикселей;
высота: 213 пикселей;
фон: 0;
поле: 80 пикселей;
граница: 0 пикселей, сплошная черная;
}
.оверлей {
непрозрачность: 0;
высота: 100%;
выравнивание текста: по центру;
-webkit-transition: упрощение всех .2s;
-moz-transition: все .2s облегчаются;
-o-transition: все .2s ослабляются;
-ms-transition: все .2s облегчаются;
переход: все .2 с ослаблением;
}
.item:hover .overlay {
непрозрачность: 1;
высота: 100%;
выравнивание текста: по центру;
}
.caption {z-индекс:100;
белый цвет;
непрозрачность: 0;
положение: относительное;
верх: 50%;
цвет фона: rgba(0, 0, 255, .60);
-webkit-transform: TranslateY(-50%);
-ms-transform: TranslateY(-50%);
трансформировать: транслироватьY(-50%);
-webkit-transition: все .4s облегчают 0,4s;
-moz-transition: все .4с замедляются на 0,4с;
-o-переход: все .4 с замедлением 0,4 с;
-ms-transition: все .4с замедляются на 0,4с;
переход: все 0,4 с, замедление 0,4 с;
}
.item:hover .caption {
непрозрачность: 1;
}
Как вы можете видеть по этой скрипте, все работает отлично, за исключением того, что мне бы хотелось, чтобы синий цвет позади текста, который отображается при наведении, покрывал весь значок (т.е. до тех пор, пока не начнется прозрачность)
Есть идеи?
Спасибо
HTML
<метка for="modal_2">
фоновое изображение: URL (http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);
размер фона: обложка; верх: 0; слева: 0;">
Привет, мир
CSS
a.img-hover:hover {
-webkit-filter: drop-shadow(0px 0px 10px #00F);
фильтр: тень (0px 0px 10px #00F);
}
#bg1 {
ширина: 90вмин;
высота: 90вмин;
маржа: 0 авто;
-webkit-filter: размытие (50 пикселей);
фильтр: размытие (50 пикселей);
размер фона: обложка;
-webkit-animation: резкость 4с;
анимация: резкость 4с;
-webkit-animation-delay: 0 с;
задержка анимации: 0 с;
-webkit-animation-fill-mode: вперед;
режим анимации-заполнения: вперед;
}
#bg1::after {
содержание: '';
-webkit-animation: предварительная загрузка 1 с;
анимация: предварительная загрузка 1 с;
-webkit-animation-delay: 1 с;
задержка анимации: 1 с;
}
@-webkit-keyframes предварительно загружает{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png
)} } Предварительная загрузка @keyframes{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png
)} } @-webkit-keyframes повышает резкость{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter
lur(20px);filterlur(20px
)} 100%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter
lur(0px);filterlur(0px
)} } @keyframes повышает резкость{0%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter
lur(20px);filterlur(20px
)} 100%{фоновое изображение:url(http://gk-usa.org/wp-content/uploads/2014/06/learn-icon.png);-webkit-filter
lur(0px);filterlur(0px
)} }
/*Разделы изотопов */
.элемент {
размер шрифта: 8pt;
выравнивание текста: по ширине;
плыть налево;
ширина: 332 пикселей;
высота: 213 пикселей;
фон: 0;
поле: 80 пикселей;
граница: 0 пикселей, сплошная черная;
}
.оверлей {
непрозрачность: 0;
высота: 100%;
выравнивание текста: по центру;
-webkit-transition: упрощение всех .2s;
-moz-transition: все .2s облегчаются;
-o-transition: все .2s ослабляются;
-ms-transition: все .2s облегчаются;
переход: все .2 с ослаблением;
}
.item:hover .overlay {
непрозрачность: 1;
высота: 100%;
выравнивание текста: по центру;
}
.caption {z-индекс:100;
белый цвет;
непрозрачность: 0;
положение: относительное;
верх: 50%;
цвет фона: rgba(0, 0, 255, .60);
-webkit-transform: TranslateY(-50%);
-ms-transform: TranslateY(-50%);
трансформировать: транслироватьY(-50%);
-webkit-transition: все .4s облегчают 0,4s;
-moz-transition: все .4с замедляются на 0,4с;
-o-переход: все .4 с замедлением 0,4 с;
-ms-transition: все .4с замедляются на 0,4с;
переход: все 0,4 с, замедление 0,4 с;
}
.item:hover .caption {
непрозрачность: 1;
}
![[codecanyon] Plagin Google Drive As WordPress CDN](/assets/images/icons/forum4.png){kind=icon}
![[lynda.com] premiere pro cc - основной курс - 3 часть](/assets/images/icons/forum1.png){kind=icon}
![[25.01.14] SYNBOZ MAX v1.3 С Дамагом](/assets/images/icons/forum2.png){kind=icon}
