Оригинальный эффект CSS3 при наведении на

Оригинальные эффекты при наведении

Из этого урока Вы узнаете как создать оригинальные эффекты при наведении на изображение или ссылку.

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

Посмотреть примерСкачать

Сейчас рассмотрим более подробно. Для начала в 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 &lt,div class=main&gt, &lt,div class=view view-first&gt, &lt,img src=images/1.jpg&gt, &lt,div class=mask&gt, &lt,h2&gt,Hover Style #1&lt,/h2&gt, &lt,p&gt,A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.&lt,/p&gt, &lt,a href=# class=info&gt,Read More&lt,/a&gt, &lt,/div&gt, &lt,/div&gt, &lt,div class=view view-first&gt, &lt,img src=images/2.jpg&gt, &lt,div class=mask&gt, &lt,h2&gt,Hover Style #1&lt,/h2&gt, &lt,p&gt,A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.&lt,/p&gt, &lt,a href=# class=info&gt,Read More&lt,/a&gt, &lt,/div&gt, &lt,/div&gt, &lt,div class=view view-first&gt, &lt,img src=images/3.jpg&gt, &lt,div class=mask&gt, &lt,h2&gt,Hover Style #1&lt,/h2&gt, &lt,p&gt,A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.&lt,/p&gt, &lt,a href=# class=info&gt,Read More&lt,/a&gt, &lt,/div&gt, &lt,/div&gt, &lt,div class=view view-first&gt, &lt,img src=images/4.jpg&gt, &lt,div class=mask&gt, &lt,h2&gt,Hover Style #1&lt,/h2&gt, &lt,p&gt,A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.&lt,/p&gt, &lt,a href=# class=info&gt,Read More&lt,/a&gt, &lt,/div&gt, &lt,/div&gt, &lt,/div&gt,

А сейчас пропишем необходимые свойства в 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 .view-first img -webkit-transition: all 0.2s linear, -moz-transition: all 0.2s linear, -o-transition: all 0.2s linear, -ms-transition: all 0.2s linear, transition: all 0.2s linear, .view-first .mask -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0), filter: alphaopacity=0, opacity: 0, background-color: rgba219,127,8, 0.7, -webkit-transition: all 0.4s ease-in-out, -moz-transition: all 0.4s ease-in-out, -o-transition: all 0.4s ease-in-out, -ms-transition: all 0.4s ease-in-out, transition: all 0.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: alphaopacity=0, opacity: 0, -webkit-transition: all 0.2s ease-in-out, -moz-transition: all 0.2s ease-in-out, -o-transition: all 0.2s ease-in-out, -ms-transition: all 0.2s ease-in-out, transition: all 0.2s ease-in-out, .view-first p -webkit-transform: translateY100px, -moz-transform: translateY100px, -o-transform: translateY100px, -ms-transform: translateY100px, transform: translateY100px, -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0), filter: alphaopacity=0, opacity: 0, -webkit-transition: all 0.2s linear, -moz-transition: all 0.2s linear, -o-transition: all 0.2s linear, -ms-transition: all 0.2s linear, transition: all 0.2s linear, .view-first:hover img -webkit-transform: scale1.1,1.1, -moz-transform: scale1.1,1.1, -o-transform: scale1.1,1.1, -ms-transform: scale1.1,1.1, transform: scale1.1,1.1, .view-first a.info -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0), filter: alphaopacity=0, opacity: 0, -webkit-transition: all 0.2s ease-in-out, -moz-transition: all 0.2s ease-in-out, -o-transition: all 0.2s ease-in-out, -ms-transition: all 0.2s ease-in-out, transition: all 0.2s ease-in-out, .view-first:hover .mask -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100), filter: alphaopacity=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: alphaopacity=100, opacity: 1, -webkit-transform: translateY0px, -moz-transform: translateY0px, -o-transform: translateY0px, -ms-transform: translateY0px, transform: translateY0px, .view-first:hover p -webkit-transition-delay: 0.1s, -moz-transition-delay: 0.1s, -o-transition-delay: 0.1s, -ms-transition-delay: 0.1s, transition-delay: 0.1s, .view-first:hover a.info -webkit-transition-delay: 0.2s, -moz-transition-delay: 0.2s, -o-transition-delay: 0.2s, -ms-transition-delay: 0.2s, transition-delay: 0.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: 17px, padding: 10px, background: rgba0, 0, 0, 0.8, margin: 20px 0 0 0, .view p font-family: Georgia, serif, font-style: italic, font-size: 12px, position: relative, color: #fff, padding: 10px 20px 20px, 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,

Успехов!

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: