Advertisement
Guest User

Untitled

a guest
Oct 18th, 2019
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.17 KB | None | 0 0
  1. body div.container {
  2. position: relative;
  3. text-align: center;
  4. display: block;
  5. margin: auto;
  6. width: 500px;
  7. height: 572px;
  8. }
  9. img.showImg{
  10. opacity:0.65;
  11. transition: .5s ease;
  12. margin: auto;
  13. }
  14. div.top-down{
  15. font-size: 25px;
  16. color: white;
  17. padding: 10px;
  18. opacity: 0.8;
  19. position: absolute;
  20. width: 80%;
  21. height: 23%;
  22. top: 90%;
  23. left: 50%;
  24. transform: translate(-50%, -50%);
  25. display: none;
  26.  
  27. }
  28. h1.center {
  29. position: absolute;
  30. top: 50%;
  31. left: 50%;
  32. transform: translate(-50%, -50%);
  33. color: #F5F5F5;
  34. font-size: 100px;
  35. }
  36. div.top-center{
  37. font-size: 50px;
  38. color: black;
  39. background: #F5F5F5;
  40. padding: 10px;
  41. opacity: 0.8;
  42. border-radius: 20px;
  43. position: absolute;
  44. width: 80%;
  45. height: 23%;
  46. bottom: 55%;
  47. left: 50%;
  48. transform: translate(-50%, -50%);
  49.  
  50. }
  51. body div div.top-center mark.orange {
  52. color:orange;
  53. background: none;
  54. }
  55. div.hideElements{
  56. transition: .5s ease;
  57. display: block;
  58. }
  59.  
  60.  
  61. .container:hover img.showImg {
  62. opacity: 1;
  63. }
  64. .container:hover div.hideElements{
  65. display: none;
  66. }
  67. .container:hover div.top-down{
  68. display: block;
  69.  
  70. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement