Guest User

Untitled

a guest
Aug 14th, 2019
233
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.09 KB | None | 0 0
  1. .grid-box {
  2.   display: grid;  
  3.   grid-gap: 5px;  
  4.   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  5.   grid-template-rows: repeat(1, 1fr);  
  6. }
  7.  
  8. .album-box {
  9.   margin: 0 auto;
  10.   display: block;
  11.   position: relative;
  12.   box-sizing: content-box;
  13.   border: 1px solid black;
  14.   background: white;
  15.   max-width: 450px;
  16.   max-height: 450px;
  17.   min-width: 250px;
  18.   min-height: 250px;
  19. }
  20.  
  21. .album-content {
  22.   display: flex;
  23.   box-sizing: border-box;
  24.   align-items: center;
  25.   justify-content: center;
  26.   height: 100%;
  27.   width: auto;
  28. }
  29.  
  30. .album-content img {
  31.   max-width: 100%;
  32.   max-height: 100%;
  33. }
  34.  
  35. .album-title {
  36.   opacity: 0;
  37.   color: white;
  38.   width: 100%;
  39.   background: rgba(0,0,0,0.5);
  40.   position: absolute;
  41.   top: 0;
  42.   left: 0;
  43.   z-index: 10;
  44.   transition: opacity 0.5s;
  45. }
  46.  
  47. .album-desc {
  48.   opacity: 0;
  49.   color: white;
  50.   width: 100%;
  51.   background: rgba(0,0,0,0.5);
  52.   position: absolute;
  53.   bottom: 0;
  54.   left: 0;
  55.   z-index: 10;
  56.   transition: opacity 0.5s;
  57. }
  58.  
  59. div:hover > .album-title, div:hover > .album-desc{
  60.   opacity: 100;
  61.   transition: opacity 0.5s;
  62. }
Advertisement
Add Comment
Please, Sign In to add comment