Кілька днів тому я був здійснення Вплив Image Rollover на сайт я працюю. Більшість портфельних сайти використанні ефекту зображення перекидання. У цьому уроці я буду вчитися, як створювати прості зображення Css перекидання ефекту. Я використовую тільки один простий графіки. Інші основні CSS стилю, з простий код HTML.

Це округлі кордон майна не підтримується Internet Explorer. Подивитись демо --

дайте нам знати ваші думки? Якщо ви знайшли будь-які інші навчальні програми, які ви хочете поділитися з нами, не соромтеся, повідомте нам, скидаючи в коментарі.

Приклад:

Крок # 1 CSS структура

Спочатку ми створити код, Simple CSS

  ; margin : 0 ; } * (PADDING: 0; Маржа: 0;)
 % normal Arial, Helvetica, sans-serif ; } BODY (шрифта: 100% нормального Arial, Helvetica, Sans-Serif;) 


  . Rollover_img (
 ; ширина: 280px;
 ; Висота: 150px;
 ( land .jpg ) ; BACKGROUND-IMAGE: URL (землі. JPG); 
 ; Довідкова інформація: Посада: зверху;
 -МОЗ кордону радіусу: 10px;
 -WebKit кордону радіусу: 10px;
 #ccc ; Кордон: 10px твердо # CCC;
 Arial, Helvetica, sans-serif ; Шрифт: 13px нормальної Arial, Helvetica, Sans-Serif;
 Висота рядки: 18px;
 Float: зліва;
 0 ; Маржа: 0 10px 10px 0;
 ) 


 color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . Rollover_img (COLOR: # FFF; 280px ширина, висота: 150px; Дисплей: блок; текстові прикраси: немає;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . Rollover_img: Hover (color: # 000; непрозорість: 60.; Фільтрів: Alpha (Opacity = 60);) 
  display : none ; width : 280px ; padding : 5px ; } . Rollover_img SPAN (Дисплей: нет; ширина: 280px; оббивка: 5px;) 
  span { display : block ; } . Rollover_img: Hover SPAN (DISPLAY: Блок;) 

Крок # 2 HTML структура

Тепер ми створимо простий HTML коду

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div "rollover_img" клас => <a TITLE = "Ace Infoway India" HREF = "http://blog.aceinfowayindia.com">
 <span> Lorem Ipsum біль сидять Яіоадоеікточ, Consectetur Adipiscing Еліт.  Sed 
 Condimentum.  У Volutpat.  Vestibulum Еліт.  Aenean Eget дані Enim 
 Tellus Бібендум Pellentesque.  Sed на Est., Наприклад, текстових, Lorem Ipsum 
 Dolor сидіти Яіоадоеікточ, Consectetur Adipiscing Еліт. </ SPAN>
 </ A> </ div> 

Подивитися демо

Слідуйте за нами на Twitter або підписатися на розробників рай + RSS-канал на кращий веб-розробки керівництв в Інтернеті.

Подано в: Css, Навчання по адміністратора