:hover

Peregrina

Hallo,

Wie bekomme ich den Text beim hovern weg. display:none; z-index; funktioniert schon mal nicht

Code

<!--HTML-->
<div class="boxtwo">
    <p>Mein Name bedeudet...</p>
</div>

/*CSS*/
.boxtwo {
    width: 300px;
    height: 300px;
    margin-left: 50px;
    background-image: url(../img/two/boxhintergrund.jpg);
    border-style: 1px solid transparent;
    border-radius: 30px;   
    box-shadow: 5px 5px 5px 0px #000000;
}

.boxtwo p {
    text-align: center;
    font-size: 40px;
    /*position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

.boxtwo:hover {
    background-image: url(../img/start/boxtwohover.jpg);
    -webkit-transition: all 3s 0s ease-out;
    -moz-transition: all 3s 0s ease-out;
    -o-transition: all 3s 0s ease-out;
    transition: all 3s 0s ease-out;
    color: transparent;
}

Alles anzeigen

Sempervivum

So funktioniert es:

Code

        .boxtwo:hover p {
            opacity: 0
        }

Wenn Du dem .boxtwo p eine Transition zuweist, wird der Text auch sanft ein- und ausgeblendet.

Peregrina

Zitat von Sempervivum
So funktioniert es:
Code
        .boxtwo:hover p {
            opacity: 0
        }
Wenn Du dem .boxtwo p eine Transition zuweist, wird der Text auch sanft ein- und ausgeblendet.

Ich glaub dich hat ein Engel geschickt, vielen lieben Dank. Wusste gar nicht, das man nach dem hover auch einen Html Tag zuweisen kann. Und wieder was dazu gelernt.

Jetzt mitmachen!