Работа с эффектами наведения css

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Свечение и отражение


Это замечательный и сложный эффект. Изначально изображения имеют небольшую прозрачность.Затем, когда на него наводится курсор мыши, прозрачность полностью убирается, появляется свечение вокруг и отражение (только для браузеров Webkit).

CSS

#ex5 {
	width: 700px;
	margin: 0 auto;
	min-height: 300px;
}
 
#ex5 img {
	margin: 25px;
	opacity: 0.8;
	border: 10px solid #eee;
 
	/*Трансформацияя*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
 
	/*Отражение*/
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
 
#ex5 img:hover {  
   opacity: 1;
 
   /*Отражение*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Свечение*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Проявляющийся текст

Данный эффект очень напоминает использование JavaScript, когда при наведении курсора мыши на один объект проявляется другой. Для его получения изображение и текст помещаются в один контейнер , а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента . Таким образом текст помещается вверх элемента и скрывается.

Для проявления текста при наведении курсора мыши, мы просто изменяем цвет и высоту строки. Так создается эффект масштабированного проявления текста.

CSS

#ex3 {
	width: 730px;
	height: 133px;
	line-height: 0px;
	color: transparent;
	font-size: 50px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	   font-weight: 300;
	text-transform: uppercase;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
 
#ex3:hover {
	line-height: 133px;
	color: #575858;
}
 
#ex3 img{
	float: left;
	margin: 0 15px;
}

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Примеры

:link:hover { outline: dotted red; }

.foo:hover { background: gold; }

Выпадающее меню

С псевдоклассом  вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

применим к HTML структуре типа следующей:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Подменю</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Подменю</a>
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Смотрите наш полный пример выпадающего меню, основанный на CSS.

Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Замечания: Для аналагичного эффекта, но основанного на псевдоклассе (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Other Pseudo-Classes

Other pseudo-classes include (for unvisited links), (for visited links), and (for any element that currently has focus).

Example:

Source Code Result
<style scoped> .example4 a:link {color:darkgreen;} .example4 a:visited {color:lightgreen} .example4 input:focus {background-color:orange;outline:5px solid black;font-size:200%;} </style> <div class=»example4″> <p><a href=»//www.html.am/html-codes/links/css-hover.cfm»>A link to this page</a> (i.e. already visited)</p> <p><a href=»http://www.secureserver.net/hosting/web-hosting_4.aspx?prog_id=zappyhost&isc=h_1″>A link to a page you’ve probably never visited</a></p> <input type=»text» value=»Click me»>

A link to this page (i.e. already visited)

Псевдоклассы¶

  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Масштабирование

При наведении курсора мыши каждое изображение медленно увеличивается в размерах, а при потере фокуса — возвращается к своим оригинальным размерам.

Для данного эффекта используется набор изображений размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 300х100 px и расширяются при наведении курсора мыши. Используется центрирование по горизонтали, и изображение с новым размером может все испортить, поэтому применяется отрицательное значение поля равное половине ширины.

CSS

#container {
	width: 300px;
	margin: 0 auto;
}
 
#ex2 img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
 
#ex2 img:hover {
	height: 133px;
	width: 400px;
	margin-left: -50px;
}

Плавное появление блока CSS при наведении

В ситуации, когда нам нужно показать блок при наведении, мы должны сделать следующее:

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

    PHP

    <div class=»on-hover»> Видимый </div> <div class=»hidden-block»> Скрытый </div>

    1 2 3 4 5 6 7


    <div class=»on-hover»>

    Видимый

    <div>

    <div class=»hidden-block»>

    Скрытый

    <div>

  2. 2. Задаем стили оформления:

    PHP

    .on-hover{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; margin-bottom:20px; text-align:center; } .hidden-block{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; text-align:center; opacity:0; /*Элемент полностью прозрачный (невидимый)*/ transition: 1s; /*Скорость перехода состояния элемента*/ }

    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

    .on-hover{

    width300px;

    background#176387;

    color#fff;

    font-size25px;

    border3pxsolid#2BA2DB;

    padding20px;

    marginauto;

    margin-bottom20px;

    text-aligncenter;

    }  

    .hidden-block{

    width300px;

    background#176387;

    color#fff;

    font-size25px;

    border3pxsolid#2BA2DB;

    padding20px;

    marginauto;

    text-aligncenter;

    opacity;/*Элемент полностью прозрачный (невидимый)*/

    transition1s;/*Скорость перехода состояния элемента*/

    }

    Скрытый блок делаем полностью прозрачным (opacity:0;), и задаем ему скорость перехода между состояниями элемента (transition: 1s;), в моем случае равное 1 секунде.

  3. 3.А теперь, для того, чтобы сделать плавное появление блока CSS нужно сделать следующее:

    PHP

    .on-hover:hover+ .hidden-block{ opacity:1; transition: 1s; }

    1 2 3 4

    .on-hoverhover+.hidden-block{

    opacity1;

    transition1s;

    }

Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).

Так как блок .hidden-block не находится внутри .on-hover, то я использую hover с +. В случае если у вас скрытый элемент находится внутри элемента, на который нужно навести указатель мышки, то вам нужно использовать вот такой селектор: .on-hover:hover .hidden-block

Вот что у нас получилось:

Видимый

Скрытый

Media Queries Level 4

Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.

Четвертый уровень медиазапросов включает в себя: ,, , . Они предоставляют информацию о возможности применения и типе пользовательского ввода. Например, будет true, если элемента активируется курсором мыши. А будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с .


Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.

CSS-эффект увеличения при наведении

Заказать звонок

Этот эффект при наведении создаётся аналогично предыдущему. Нам просто нужно присвоить нужному элементу на сайте класс «hover-effect2» и добавить в файл стилей style.css следующий код:

PHP

/**Эффект увеличения**/ .hover-effect2 { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .hover-effect2:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

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

/**Эффект увеличения**/

.hover-effect2{

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}  

.hover-effect2hover{

-webkit-transformscale(1.1);

-moz-transformscale(1.1);

-o-transformscale(1.1);

transformscale(1.1);

-webkit-transitionall0.5sease;

-moz-transitionall0.5sease;

transitionall0.5sease;

}

Для увеличения элемента мы используем CSS свойство transform: scale(1.1);

В скобочках указывается значение увеличения или уменьшения. 1 это размер 100%, если нам нужно увеличить элемент на 10% указываем в скобочках 1.1. Для увеличения на 20% указываем 1.2 и так далее. Для уменьшения на 10% пишем 0.9.

Это CSS-свойство, так же как и предыдущее указывается с кроссбраузерными префиксами. Ну и, конечно же, везде добавляем CSS свойство transition для более плавной анимации.

How Not To Do a Hover Over Effect

OK, let’s have a little fun and go way over the top with our CSS hover over effect. Let’s add properties that really screw up the text and generally make things really difficult for the user.

You could say this is how not to do a hover-over effect (mind you, it doesn’t look that bad — I’ve seen worse!)

Source Code Result
<style scoped> .not-so-cool-effects a:hover {font-size:600%;background-color:orange;color:white;text-transform:uppercase;border:6px double black;padding:20px;font-weight:bold;font-style:italic;text-decoration:none;} </style> <div class=»not-so-cool-effects»> <p>So I found these really cool <a href=»//www.html.am/templates/»>HTML templates</a> that I thought you might be interested in.</p> </div>

So I found these really cool HTML templates that I thought you might be interested in.

HTML Tags

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

Заказать звонок

Предположим, у вас на сайте есть какая-то кнопка, блок, изображение или любой другой элемент, и вы хотите добавить к нему такой эффект. Для этого нам нужно будет сделать следующее:

  1. 1.Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2.Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.


    PHP

    <div class=»coll-me-btn hover-effect1″>Заказать звонок</div> <img src=»images/example3.jpg» alt=»Пример изображения для эффектов при наведении» class=»hover-effect1″ />

    1 2 3

    <div class=»coll-me-btn hover-effect1″>Заказатьзвонок<div>

    <img src=»images/example3.jpg»alt=»Пример изображения для эффектов при наведении»class=»hover-effect1″>

    Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

    Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

  3. 3.После того как мы присвоили нужный класс, нам нужно в файл style.css активной темы добавить определенный фрагмент кода, который собственно говоря, и позволит нам добавить тень.
  4. 4.Для внесения изменений в файл стилей либо подключаемся к нашему сайту по FTP. Я для этого обычно использую программу NotePad++.

    Как пользоваться программой NotePad++ я рассказывала в этой статье: Редактирование файлов сайта в Notepad++

    Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

  5. 5.Прокручиваем в самый конец и здесь, в самом конце нашего файла нам необходимо добавить следующий CSS-код:

    PHP

    /**Появление тени**/ .hover-effect1 { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .hover-effect1:hover { -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; box-shadow:0 0 10px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    /**Появление тени**/

    .hover-effect1{

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }  

    .hover-effect1hover{

    -moz-box-shadow10px#000;

    -webkit-box-shadow10px#000;

    box-shadow10px#000;

    -webkit-transitionall0.5sease;

    -moz-transitionall0.5sease;

    transitionall0.5sease;

    }

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover. CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Появление руки при наведении пример

2).<head></head>ctrl + Uctrl + Fhead

Но сейчас можно прописывать стили вообще в любом месте страницы!

Там они прописываются в соответствующем теге

<style></style>

Возьмем сверху экспериментальный тег, и к нему добавим еще один класс example_2:

<span class=»example example_2″>Тот же тег span, но и добавим еще один класс example_2</span>

Менять цвет второй раз скучно, давайте теперь к нашему тегу прибавим например руку, при наведении будет показываться рука.

cursor: pointer;

<style>

.example_2

{

cursor: pointer;

}

</style>

Результат:

Здесь приведен пример появления руки при наведении, но и осталось изменение цвета при наведении!

Тот же тег span, но и добавим еще один класс example_2

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider


С этим читают