Вход Регистрация
* SysTeam.exe

Текст на картинке (CSS3)

  1. *.html
  2. <div class="div">
  3. <span
  4. class="img">
  5. <imgsrc="images/
  6. Hight_School.png"/
  7. >
  8. <span
  9. class="text">
  10. Ваштекст!
  11. </span>
  12. </span>
  13. </div>
  14. *.css
  15. .div{
  16. border-top:1px
  17. solid#777;
  18. text-align:
  19. center;
  20. padding:10px;
  21. }
  22. .text{
  23. overflow:hidden;
  24. display:block;
  25. position:
  26. absolute;
  27. margin-top:3px;
  28. bottom:3px;
  29. left:0;
  30. width:100%;
  31. height:98%;
  32. box-sizing:
  33. border-box;
  34. color:#FFF;
  35. text-align:left;
  36. padding:5px
  37. 10px;
  38. opacity:0;
  39. transition:
  40. all.2sease-in-
  41. out;
  42. -webkit-
  43. transition:
  44. all.2sease-in-
  45. out;
  46. -moz-transition:
  47. all.2sease-in-
  48. out;
  49. }
  50. .text:hover{
  51. background-color:
  52. rgba(0,0,
  53. 0,.9);
  54. opacity:1;
  55. }
  56. .img{
  57. display:inline-
  58. block;
  59. position:
  60. relative;
  61. }
» Описание: Плавное
появление текста и фона на
картинке при наведении на
неё курсора!
Не забудьте, пожалуйста,
п
» Время добавления: 26 Июля 2014 в 04:28
» Посмотров: 703
» textarea
» Рейтинг: [+2 | -0]
Комментарии [0]
Онлайн: 3
Реклама