View Div When A Hover

Question

I have a strip with pictures that I want to hover over them,and text pops beneath the picture with what the picture is.

I think there is a problem with the CSS. And if you can do it maybe try to get the transition to work too.

Here is the CSS and HTML :

.procat{
    background-color: #555555;
    padding-top: 15px;
    padding-bottom: 15px;
}
.procat img{
    margin-left: 20px;
    margin-right: 20px;
}
.procath{
    display: none;
    transition: 1s;
}
.procath a.procath:hover{
    display: block;
    transition: 1s;
    background-color:dimgrey;
}

<div class="procat">
                <a class="tb" href="ThunderBird">
                    <img width="100px" height="100px" src="pic/icons/phone.png">
                </a>
                <a href="ZeroBook">
                    <img width="100px" height="100px" src="pic/icons/laptop.png">
                </a>
                <a href="ProjectTime">
                    <img width="100px" height="100px" src="pic/icons/car.png">
                </a>
                <div class="procath">
                    <h6>
                        ThunderBird
                    </h6>
                </div>
            </div>

you want to show the div that has the header with content "ThunderBird" when any images is hovered? — repzero, Oct 29 '16 at 15:08

score 0 · Accepted Answer · edited May 23 '17 at 12:33

display property can't be transitioned. Use visibility instead and also use proper selectors. This link should explain more about affecting other elements on hover: How to affect other elements when a div is hovered

Also, solution below

.procat{
    background-color: #555555;
    padding-top: 15px;
    padding-bottom: 15px;
}
.procat img{
    margin-left: 20px;
    margin-right: 20px;
}
.procath{
    visibility: hidden;
    transition: 1s;
}
.procat a:hover ~ .procath{
    visibility:visible;
    transition: 1s;
    background-color:dimgrey;
}

<div class="procat">
                <a class="tb" href="ThunderBird">
                    <img width="100px" height="100px" src="pic/icons/phone.png">
                </a>
                <a href="ZeroBook">
                    <img width="100px" height="100px" src="pic/icons/laptop.png">
                </a>
                <a href="ProjectTime">
                    <img width="100px" height="100px" src="pic/icons/car.png">
                </a>
                <div class="procath">
                    <h6>
                        ThunderBird
                    </h6>
                </div>
            </div>

FWIW `visibility` and `display` are different, not-quite-interchangeable properties with different applications; `visibility` means that the element takes up layout space either way (it's almost the same as just using `opacity`, which would transition more smoothly IMO). This is one of those simple problems that always ends up with a more complicated solution. — Ben Saufley, Oct 29 '16 at 18:07
@BenSaufley That's true, I assumed that OP doesn't know that `display` can't be triggered by `transition`, hence I offered a solution using `visibility`. The only way of doing it while still using `display` would be using JavaScript. — Varin, Oct 29 '16 at 20:50

View Div When A Hover

1 Answers1