CODEWITHSUNDEEP
htmlcss
sljafna
sljafna

Reputation: 37

Trigger animation of two elements on hover

I made a grid container that does the page organization (for a lack of a better term) one of those blocks is the contact page, the html code for that looks like this:

<div class="grid-contact"> <img class="socials" src="facebook.png" alt="fb"> Contact </div>

The css code for the div and the img looks like this

.grid-contact{
    border: 1px solid black;
    writing-mode: vertical-lr;
    font-size: 30px;
    transform: rotate(180deg);
    text-align: center;
    width: 65px;
    transition: width 0.5s, font-size 0.5s;
}

.socials{
    transform: rotate(180deg);
    height: 2.56px;
    width: 2.56px;
    position: absolute;
    top: 45%;
    right: 2px;
    transition: width 0.5s, height 0.5s;
}

I envisioned it so that when you hover over the contact text it's gonna slide out and all the social media logos would kinda get bigger, and I did exactly what I wanted with these two hover css blocks:

.grid-contact:hover{
    display: inherit;
    width: 130px;
    font-size: 65px;
}

.socials:hover{
    height: 25.6px;
    width: 25.6px;
}

However, I don't know how to trigger both of the animations when just hovering the "Contact" text.

Also the way I figured to do it, with the logos being super small and then just changing their size on hover may be completely wrong but it's the only thing I could think of, if you think there could be an easier solution altogether please let me know. Also I've been learning javascript aswell so if there is a way to do it with js too I'm all ears.

I hope someone can help.

Upvotes: 1

Views: 156

Answers (1)

Urel
Urel

Reputation: 191

If I understand your problem, you can just make something like that:

.grid-contact:hover{
    display: inherit;
    width: 130px;
    font-size: 65px;
}
.grid-contact:hover > .socials {
    height: 25.6px;
    width: 25.6px;
}

Upvotes: 1

Related Questions