Как задать эффект hover в CSS для текста с opacity 1, если он с opacity 0.9? — Хабр Q&A
Есть блок. В нём картинка задана background. Далее блок, который срабатывает при наведении мышки (hover-block). В этом блоке есть ссылка с текстом (h2, span). Для hover-block изначально указан opacity: 0. При наведении opacity: 0.9. Но и всё содержимое блока тоже с такой прозрачностью. А я хочу, чтобы текст внутри блока hover-block был opacity: 1 при этом эффект hover с opacity: 0.9. Я игрался долго с этими блоками, менял местами, ничего не получилось. Как добиться этого результата?HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div> <div> <div> <div> <div> <a href="#"> <h2>Apex Magazine<br>June Issue</h2> <span>by Fabrizio Morra</span> </a> </div> </div> </div> </div> </div> </main> </body> </html>
CSS:
body {
margin: 0;
}
body main .footer {
width: 440px;
height: 400px;
}
body main .footer .slider .slide {
margin-left: 27px;
box-sizing: border-box;
outline: none;
}
body main .footer .slide.slick-slide {
cursor: pointer;
}
body main .footer .slide .img-1 {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in;
}
body main .footer .slide .img-1 .hover-block {
background: #1bf1ad;
display: flex;
justify-content: flex-start;
align-items: flex-end;
opacity: 0;
transition: all 0.3s ease-in;
}
body main .footer .slide .img-1 .hover-block:hover {
opacity: 0.9;
transition: all 0.3s ease-in;
}
body main .footer .slide .img-1 .hover-block a {
color: #ffffff;
text-decoration: none;
padding: 0 30px 30px 50px;
outline: none;
}
body main .footer .slide .img-1 .hover-block a h2 {
font-family: "Times New Roman", sans-serif;
font-size: 28px;
letter-spacing: 3px;
line-height: 0.9;
text-transform: uppercase;
margin-bottom: 10px;
}
body main .footer .slide .img-1 .hover-block a span {
font-family: "Times New Roman", sans-serif;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
}
body main .footer .slide .img-1 {
background: url("img/sl1.jpg") no-repeat;
background-size: cover;
}
body main .footer .slide .img-1 .hover-block {
width: 440px;
height: 400px;
} И попутный вопрос, Как реализовать данный эффект без использования background в CSS, а только в HTML через img src=»» alt=»»
33 CSS3 эффекта при наведении, о которых вы должны знать
Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или текст является одним из наиболее распространенных методов CSS.
В этой статье я собрал много интересных эффектов CSS3, проявляющихся при наведении курсора мыши. Вы можете легко применить их на своем сайте или других веб-проектах. Давайте посмотрим, что я для вас приготовил.
Как следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.
Исходный код
Когда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.
Исходный код
Это уже довольно избитый эффект, но многие люди все равно с удовольствием его используют. Презентация является простой, но привлекательной.
Исходный код
Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.
Исходный код
Это еще один интересный эффект наведения. Он идеально подойдет для миниатюр или других типов изображений.
Исходный код
А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.
Исходный код
Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.
Исходный код
Это коллекция, состоящая из четырех различных эффектов наведения на изображение. Вместе с эффектом отображаются его название и описание.
Исходный код
Это забавный и интересный эффект наведения для изображений. Круглая рамка идеально подходит для применения к аватаркам участников команды, изображений рекомендаций.
Исходный код
Этот стильный винтажный hover эффект CSS вызовет в вас чувство ностальгии. Вы можете использовать его, чтобы создать ретро стиль для сайта.
Исходный код
При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.
Исходный код
Это еще один простой, но очень красивый CSS hover эффект при наведении. При наведении курсора мыши на изображение он выводит название и описание с помощью смарт-эффекта перелистывания.
Исходный код
Пока вы не наведете курсор мыши на изображение, вы не поймете красоту этого эффекта. Случайные линии красиво превращаются в логотип, а затем он раскрашивается цветами.
Исходный код
Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!
Исходный код
При наведении курсора на изображение применяется уменьшение непрозрачности с фокусировкой на ссылке.
Исходный код
Возможно, это и не очень полезный hover эффект CSS, но забавный. Просто наведите курсор мыши на солнцезащитные очки, и начнется магия.
Исходный код
Это креативный эффект наведения, доступный в нескольких вариациях. В них предлагаются уникальные возможности для оформления изображений.
Исходный код
Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.
Исходный код
Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.
Исходный код
Этот эффект наведения можно применить, чтобы в начале скрыть иконки социальных медиа, а затем вывести их, когда пользователь наводит на них курсор мыши.
Исходный код
Это отличный способ предоставления дополнительной информации о товарах в интернет-магазине. При наведении курсора на изображение продукта с помощью красивого эффекта отображается информация о нем.
Исходный код
Идеальный CSS hover эффект при наведении для раздела «Связаться с нами«. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.
Исходный код
Этот уникальный эффект наведения для кнопки «Вверх» позволяет предоставить посетителям красивый, анимированный указатель.
Исходный код
При наведении курсора мыши на изображение, оно не только увеличивается, но и изменяется способ его отображения.
Исходный код
Этот hover эффект CSS добавляет к изображению красивые стили.
Исходный код
Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.
Исходный код
Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari. Вы можете заменить значок собственным изображением или логотипом.
Исходный код
Это простой эффект наведения, который может быть применен и к кнопкам, и к изображениям. Легкая подсветка увеличит привлекательность изображений.
Исходный код
Если вы запускаете сайт обмена фотографиями или каталог изображений, этот эффект окажется для вас незаменимым. При наведении курсора мыши на изображение оно сгибается забавным образом и пользователю выводятся панель операций с изображением.
Исходный код
Это поистине уникальный CSS hover эффект рамки. При наведении курсора мыши он «кладет изображение на землю«.
Исходный код
Этот эффект изменяет фон при наведении курсора мыши на кнопку. Немного поэкспериментировав, можно легко реализовать его на своем сайте.
Исходный код
Это еще один CSS hover эффект при наведении, выделяющий путь перемещения курсора мыши. При наведении указателя он добавляет затемнение на изображения. И это затемнение следует за курсором.
Исходный код
Эти красивые эффекты наведения выглядят очень интересно. Анимация и масштабируемость SVG-изображений делают их идеальными для любого типа сайтов.
Исходный код
Что вы думаете об описанных мною hover эффектах CSS? Какие из них понравились вам больше всего? Напишите об этом в комментариях.
Данная публикация представляет собой перевод статьи «30+ CSS3 Hover Effects You should be Familiar With» , подготовленной дружной командой проекта Интернет-технологии.ру
Изменение прозрачности DIV при наведении мыши
Изменение прозрачности DIV при наведении мыши
От нечего делать решил изобразить такую штуку, чтобы при наведении мыши на DIV его прозрачность менялась. Для изменения прозрачности используется появившееся в CSS3 свойство прозрачности opacity. Сразу скажу, что в недобраузере IE это работать скорее всего не будет. В Chrome, FF, Opera — все работает.
Итак, страница содержит 3 родительских div’a, внутри каждого еще по 2 div’a — один с картинкой, другой с текстом. Создает html файл с таким содержанием:.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Изменение прозрачности DIV при наведении мыши.</title> <body> <div> <div><img src="1.jpg"></div><div>Чашка кофе</div> </div> <div> <div><img src="2.jpg"></div><div>Офисное кресло</div> </div> <div> <div><img src="3.jpg"></div><div>ЖК монитор</div> </div> </body> </html>
Для каждого родительского div’а указываем вызов пользовательских JavaScript функций:
- по наступлении события onMouseOver, когда мышка попадает на div срабатывает функция up(this)
- по наступлении события onMouseOut, когда мышка уходит из div’а срабатывает функция down(this)
Как видим у каждого из div’ов есть свой класс. Вот их мы и опишем дальше вот таким образом:
.paretndiv {
width:700px;
height:150px;
opacity:0.5;
}
.textbox{
height:inherit;
display: table-cell;
vertical-align: middle;
font-size:36px;
}
.image{
float:left;</p>
Здесь все должно быть понятно. Для div’а paretndiv устанавливаем начальную прозрачность 0,5. Содержимое div’а textbox располагаем вертикально по центру.
Осталось написать две функции — up, которая будет увеличивать прозрачность до 1 и down, которая будет возвращать прозрачность к начальному значению 0,5. Выглядят они примерно так:
function up(el){
el.style.opacity="1";
}
function down(el){
el.style.opacity="0.5";
} В принципе, все. CSS и JS можно оформить в виде отдельных файлов, либо писать непосредственно в html файле. В папку с файлом html необходимо положить 3 jpg файла с именами 1, 2, 3 высотой до 150 пикселей. В итоге должно получится следующее:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Изменение прозрачности DIV при наведении мыши.</title></p>
<STYLE type="text/css">
.paretndiv {
width:700px;
height:150px;
opacity:0.5;
}
.textbox{
height:inherit;
display: table-cell;
vertical-align: middle;
font-size:36px;
}
.image{
float:left;
}
</STYLE></p>
<script language="javascript" type="text/javascript">
function up(el){
el.style.opacity="1";
}
function down(el){
el.style.opacity="0.5";
}
</script></p>
<body>
<div>
<div><img src="1.jpg"></div><div>Чашка кофе</div>
</div>
<div>
<div><img src="2.jpg"></div><div>Офисное кресло</div>
</div>
<div>
<div><img src="3.jpg"></div><div>ЖК монитор</div>
</div>
</body>
</html>
Если div’ы расположить внутри ссылок, то от JS можно отказаться вообще, а использовать псевдокласс hover. Так что кому интересно — тут еще можно поковыряться
Скачать исходники примера или посмотреть пример.
Метки: css, div, html, javascript, opacity, прозрачностьПохожие записи
CSS-прозрачность и ее применение для различных элементов :: SYL.ru
Стилизацию элементов на собственном сайте, бесспорно, можно назвать одной из важнейших задач, стоящих перед web-мастером. Тут, как и в жизни, встречают по одежке. Уникальный стиль, красота и в тоже время простой и интуитивно понятный дизайн не только помогут составить первое впечатление, но и привлекут новых читателей, клиентов или покупателей, в зависимости от направленности сайта.
Прозрачность контента
Создавая средствами CSS-прозрачность контента, для начала стоит понять, как необходимо прописывать саму форму. Конечно же, в данном материале не будет углубления в стандартные теги для программирования страницы сайта в общем. Для наглядного примера речь пойдет о прямоугольной области, окрашенной монотонной заливкой. Чтобы отобразить ее, потребуется создать простенький файл стиля CSS с последующей привязкой, или же разместить код прямо на странице html-документа. Прописав для прямоугольного блока необходимые параметры высоты, ширины, цвета и контура, к стилю необходимо добавить код, позволяющий сделать прозрачность CSS-объекта. За это отвечает параметр «opacity: 0.X», так как это и есть уровень видимости. Чем ближе его значение к единице, тем объект становится незаметнее. Данный стиль будет исправно работать в браузерах, обладающих поддержкой CSS3. Такими инструкциями сейчас обладают практически все современные веб-обозреватели.
Повышение универсальности кода
Если же программист желает оптимизировать свой контент для более старых приложений, ему необходимо будет изучить дополнительные стили.
Для Internet Explorer версии 5.5 и выше воспринимаемым кодом является весьма длинная и некрасивая строчка — «filter:progid:DXImageTransform.Microsoft.Alpha(opacity=X)», где параметр прозрачности необходимо указывать уже не в долях от единицы, а в сотнях. Его максимальное значение, при котором прозрачность цвета CSS-объекта становится полной, составляет 100.
Собственный код существует и для менее популярных браузеров. Одним из таких является Konqueror, больше известный пользователям рабочей среды KDE на UNIX-подобных системах. Для него прозрачность CSS потребуется прописать параметром «-khtml-opacity: 0.X».
Для полной уверенности в оптимизации своего кода можно добавить строчку, обеспечивающую поддержку одних из первых версий браузеров Mozilla: «-moz-opacity: 0.X».
Выполнив подобную оптимизацию, web-мастер сможет добиться правильного отображения своего контента на большинстве пользовательских устройств.
Активность при наведении
Так как CSS-прозрачность чаще всего используется как оформление для элементов с гиперссылками, то активность при наведении на них становится одной из первостепенных задач. В качестве примера можно рассмотреть тот же прямоугольник. Допустим, необходимо, чтобы при наведении на блок прозрачность менялась с 0 до значения 0.5. Для получения такой возможности понадобится всего лишь занести уже имеющийся стиль, отвечающий за прозрачность, под дополнительный CSS-параметр hover. Данным свойством пользуются и для добавления таких эффектов, как изменение цвета и формы объектов при наведении. Это позволяет сделать необходимые области визуально активными, привлекая внимание посетителей к ссылкам или контенту.
Применение для изображений
В том случае, если описанный выше процесс понятен, добавить при помощи CSS прозрачность для изображений не составит никакого труда. Здесь даже не потребуется вносить изменения в сам код стиля. Его можно оставит прежним. Поработать придется только при верстке картинок в сам html-документ. Если в предыдущих случаях для вставки элемента использовались теги «div», то здесь попросту потребуется заменить их на «img», соответствующие данному типу контента. Стиль же для изображений подключаем тот же, что и для блоков. Конечно, применяя CSS, описанный в начале статьи, нужно будет изменить параметры высоты, ширины и краев для гармоничного вида вставленной картинки.
Прозрачность текста и фона
Вариант в примере с текстом аналогичен вставке изображений. Создавать в CSS прозрачность отдельно также не потребуется. В данном случае необходимо будет заменить теги на те, что используются для верстки текстовых полей. Таковыми являются «p» и «span».
Когда текст прописан в теле html-документа без использования специальных тегов, добавить прозрачность будет весьма затруднительно и долго по времени. Поэтому подобный вариант рассматривать не имеет смысла.
На случай, если на сайте потребовалось сделать прозрачность фона, CSS и тут станет оптимальным вариантом. Так как background является по сути той же картинкой или формой, к нему необходимо всего лишь прикрепить наш стиль в основном коде веб-ресурса.
opacity | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.0+ | 2.0+ | 1.7+ | 2.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 1 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-color/#transparency |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}
</style>
</head>
<body>
<p>
<img src="images/igels.png" alt="Обычный рисунок">
<img src="images/igels.png" alt="Полупрозрачный рисунок">
</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Результат использования opacity
Браузеры
Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
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 | .ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: #c9512e url(../images/noise.png);
box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
.ch-item:hover .ch-thumb {
box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
transform: rotate(-110deg);
} |
Свойство css «прозрачность» — простой способ сделать дизайн сайта интереснее
Сегодня создание дизайна сайта становится настоящим искусством. Это не просто набор элементов страницы определенного цвета и размера, шрифты разных стилей и тематические рисунки. Для того чтобы сделать сайт непохожим на другие, привлечь внимание посетителей и направить его на те или иные элементы, используется огромное количество способов и инструментов. Среди них имеется очень популярное свойство css — прозрачность. Эта техника довольно модная и эффектная, а потому применяется часто. Придать прозрачность можно различным объектам страницы сайта — тексту, целому блоку или картинке, например. Достигается она также разными способами. Рассмотрим их ниже.
Параметры задания прозрачности элементов
Параметров, позволяющих регулировать степень прозрачности элементов, несколько. Используются они в зависимости от конкретных целей, а также браузера, под который «подгоняется» дизайн. К ним относятся следующие свойства:
- opacity;
- filter;
- PNG-изображение в качестве фона.
Значения свойства css «прозрачность» изменяются следующим образом: чем больше цифра, тем ниже уровень прозрачности элемента. В opacity она варьируется от 0 до 1, в filter — от 10 до 100. Причем последний используется для браузера Interet Explorer, а для всех остальных применяется свойство opacity.
Прозрачность изображения (изменяющаяся)
Начнем с варианта, когда прозрачность будет проявляться при наведении на элемент курсора мышки.
Рассмотрим, как задавать прозрачность картинки. CSS предлагает два варианта. Для этого необходимо прописать ее непосредственно в коде html-документа следующим образом:
- Указываем путь к изображению.
- Определяем параметры прозрачности при наведении курсора и нет. Для этого используем свойства onmouseover и onmouseout, в которых прописываем значения opacity и filter.
Эти же характеристики можно прописать в css-документе, а в исходном коде добавить лишь ссылку на него. Результаты получатся одинаковые.
Прозрачность текста и блоков страницы
Что касается текста или блока (прозрачность div), css предлагает воспользоваться вариантом, аналогичным созданию прозрачности изображения, то есть использовать подключенный css-файл, в котором будут задаваться нужные параметры. Можно пойти и более простым путем. При задании стилей блока div style или текста p прописать следующий html-код для элементов onmouseover и onmouseout. Оба варианта работают и дают нужный результат.
Прозрачность постоянная
В некоторых случаях прозрачность объекта, элемента дизайна или текста требуется задать на постоянной основе. В данной ситуации решение еще проще, чем при наведении курсора мыши.
Для элемента css прозрачность будет задаваться следующим кодом. В блоке div style прописываем значения для background (например, #ff8800), opacity (н-р, 0.5), а также ширину (width) и отступ (padding).
Для картинки в код вносим значения opacity и filter, а также указываем путь к изображению.
RGBA-метод
Существуют и другие варианты использования данного свойства css: прозрачность можно применить к фоновому цвету какого-либо элемента дизайна. Для этого используется метод RGBA. Первые три буквы означают основные цвета (красный, целеный, синий), а последняя — alpha, которая и задает уровень прозрачности. Используя RGBA-формат, прописываем степень прозрачности, указывая ее в последней цифре. Например, так: background:rgba(240,2,33,0.4035).
Заключение
Таким образом, используя в ходе работы над дизайном сайта простое, но эффектное свойство css «прозрачность», можно сделать его элементы интереснее и заметнее, приложив минимум усилий. Описанные варианты задания характеристик прозрачности вам в этом помогут.