_section.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. #start{
  2. margin-top: 35px;
  3. //home
  4. .item{
  5. display: flex;
  6. .card{
  7. position: relative;
  8. width: calc(100% / 3);
  9. overflow-y: hidden;
  10. padding-bottom: 5px;
  11. .card-image:hover{
  12. transition: all 0.5s;
  13. background-color: rgb(0, 255, 0);
  14. img{
  15. transition: all .6s;
  16. mix-blend-mode: multiply;
  17. opacity: .95;
  18. }
  19. & ~ .card-title{
  20. top: 50%;
  21. left: 50%;
  22. opacity: 1;
  23. transition: all 1s;
  24. }
  25. }
  26. .card-title{
  27. pointer-events: none;
  28. position: absolute;
  29. top: 105%;
  30. left: 50%;
  31. opacity: 0;
  32. transition: all 1s;
  33. transform: translate(-50%, -50%);
  34. }
  35. }
  36. }
  37. //pageprojet
  38. .content-item{
  39. .e-content{
  40. display: flex;
  41. }
  42. .media{
  43. width: calc((100% / 4) * (3));
  44. }
  45. .content{
  46. .txt{
  47. position: fixed;
  48. right: 0;
  49. width: calc(100% / 4);
  50. height: calc(100% - 70px);
  51. padding: 0 10px 0 20px;
  52. overflow-x: auto;
  53. h3{
  54. margin: 20px 0 10px 0;
  55. }
  56. }
  57. .taxonomy{
  58. display: flex;
  59. width: 100%;
  60. height: 35px;
  61. background: white;
  62. padding: 0 10px 0 20px;
  63. position:fixed;
  64. bottom: 0;
  65. border-top: 2px solid black;
  66. span{
  67. margin: auto 0;
  68. a{
  69. margin-left: 5px;
  70. }
  71. }
  72. }
  73. }
  74. }
  75. }