0

I'm trying to do a transition ease in on a div when it's parent it's hovered - it looks like this:

.masonry-grid__item {
  position: relative;
  float: left;
  width: 20%;
}

img {
  width: 100%;
}

.masonry-grid__item-headers {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 30px;
        background-color:rgba(0,0,0,0.6);
        transition: visibility 300ms;
}
    
.masonry-grid__item:hover > .masonry-grid__item-headers {
        visibility: visible;
}
<div class="masonry-grid__item">
        <img src="https://media.wired.com/photos/5e1e646743940d0008009167/master/w_2560%2Cc_limit/Science_Cats-84873657.jpg" alt="">
        <div class="masonry-grid__item-headers">
            <h2>hey</h2>
            <h3>hows it going</h3>
        </div>
    </div>

Css transition from display none to display block, navigation with subnav

Accepted answer:

As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.

I'm not using a display property and I'm using visibility. I also tried:

.masonry-grid__item-headers {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 30px;
        background-color:rgba(0,0,0,0.6);
        transition: 0.2s ease;
    }

Where is it going wrong?

halfer
  • 19,824
  • 17
  • 99
  • 186
kawnah
  • 3,204
  • 8
  • 53
  • 103
  • 1
    [You can't transition `visibility` in CSS](https://stackoverflow.com/q/27900053/12701949) – Daniel_Knights Sep 16 '20 at 20:29
  • 2
    Does this answer your question? [CSS transition with visibility not working](https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working) – Daniel_Knights Sep 16 '20 at 20:30
  • interesting, I could've sworn you could do transitions on display. oh well, opacity works – kawnah Sep 16 '20 at 20:32
  • Display and visibility has discrete values and therefore cannot be transitioned. It’s like trying to transition between true and false. – Terry Jan 22 '23 at 11:45

0 Answers0