0

I am making a document in a grid format and when I hover over the image I want to have an overlay, it randomly goes underneath it. How would I bring this effect higher up on the document. (The first image in the only one with the effect currently). HTML won't display in a code block here for some reason so I attached my codepen, thank you everyone!

.flex {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 0% 5% 5% 5%;
}
.resize {
  max-width: 100%;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: cyan;
  overflow: hidden;
  width: 28%;
  height: 0;
  transition: .5s ease;
  opacity: 0.3;
   margin: 0% 0% 0% 5%;
}

.contained1:hover .overlay {
  height: 35%;
  width: 28%;
  margin: 0% 0% 0% 5%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'karla';
}

CODE PEN: https://codepen.io/daniel-albano/pen/vYOKRzp?editors=1100

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Daniel Albano
  • 21
  • 6

1 Answers1

2

If i understood you correctly the easiest way is to make it absolute relative to parent. In this example the .contained1 had to have postion: relative; and make it invisible while not hovering.

.contained1 {
  position: relative;
  overflow: hidden;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #2a7de1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0.7;
  transform: translate(100%, 100%);
}

.contained1:hover .overlay {
  transform: translate(0, 0);
}

So the way i done it is to make parent overflow: hidden then overlay need to go outside to make it invisbile by doing transform: translate(100%, 100%); (you dont really need to do it on x and y axis simultaneously). Then while user hovers on it you just reset transform: translate(0, 0); to its initial value and that's it

I hope i have resolved your problem ❤

snoh666
  • 129
  • 1
  • 6