How to transition something in a
when hovering over that

Question

circle style

.circle
{

background-color: white;
height: 120px;
width: 120px;
border-radius: 70px;
box-shadow: 2px 2px 5px;
border-top-color: black;
margin: auto;
border-width: 5px;
border-bottom-color: blue;
transition-timing-function: ease-in;
transition-duration: 1.2s;
margin-top: 70px;
transition-property: transform, transform;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-name: animation;
}

circle transition

.circle:hover
{

transform: rotateY(180deg);



}

text I want to fade with the circles transition

.circle-text
{

font-family: Verdana;
font-style: bold;
color: black;
margin-left: 43px;
padding-top: 50px;
line-height: 120px;
font-size: 13px;
transition-duration: 1s;
transition-timing-function: ease-in ;


}

I want this text to fade with the transition of the circle. How can I make it so when I hover over the circle it does that?

<div class="circle">

 <a class="circle-text" >Hello</a>
    
</div>

.circle:hover .circle-text { /* your css change */ } – iguypouf Nov 01 '20 at 19:26 — iguypouf, Nov 01 '20 at 19:26

001 · Answer 1 · 2021-08-22T18:54:18.560

1- Style the text opacity when hover on circle
2- Add transition: opacity 0.4s and transition-delay: 0.6s to balance between the animation and the fade
Check 'Added' comment

Add the new properties to the selectors for DRY coding

.circle{
    background-color: white;
    height: 120px;
    width: 120px;
    border-radius: 70px;
    box-shadow: 2px 2px 5px;
    border-top-color: black;
    margin: auto;
    border-width: 5px;
    border-bottom-color: blue;
    transition-timing-function: ease-in;
    transition-duration: 1.2s;
    margin-top: 70px;
    transition-property: transform, transform;
    animation-timing-function: ease;
    animation-duration: 1s;
    animation-name: animation;
}

.circle:hover{
    transform: rotateY(180deg);
}

.circle-text{
    font-family: Verdana;
    font-style: bold;
    color: black;
    margin-left: 43px;
    padding-top: 50px;
    line-height: 120px;
    font-size: 13px;
    transition-duration: 1s;
    transition-timing-function: ease-in ;
}


/*ADDED:*/
.circle:hover .circle-text {
    opacity: 0;
}

.circle-text{
  transition: opacity 0.4s;
  transition-delay: 0.6s;
}

<div class="circle">
  <a class="circle-text" >Hello</a>
</div>

How to transition something in a when hovering over that

1 Answers1

How to transition something in a
when hovering over that