How do i make my LinkedIn badge transition smoothly fade in and out?

Question

How do I make my LinkedIn badge transition smoothly fade in and out?

I know the basics of Web Developing and I have been using and learning HTML and CSS on visual studio code for 3 or 4 days, recently I was creating a personal website which is still in the making and I came across a confusion in which the transition command of CSS is not working for me I don't know why I want the LinkedIn badge to Fade in and Fade out in approximately 2 or 3 seconds smoothly but it is not letting me.

This is the Code: https://jsfiddle.net/JadeDoe/1jvs6rhy/9/

CSS :

    .badge-base {
        display: none;
        position: absolute;
        top: 24px;
        left: 16%;

        transition: 1s;
    }

    .Heading:hover+.badge-base {
        display: inline;
    }

    .Heading:hover .badge-base,
    .badge-base:hover {
        display: block;
    }

IT goldman · Answer

You can't transtion display none to block. You can however do it using opacity (although it's not the exact thing because the element would still take up space)

.badge-base {
  position: absolute;
  top: 24px;
  left: 40%;
  transition: 1s;
  opacity: 0;
  pointer-events: none;
}

.Heading:hover+.badge-base {
  display: inline;
  opacity: 1;
  pointer-events: all;
}

.Heading:hover .badge-base,
.badge-base:hover {
  display: inline;
  opacity: 1;
  pointer-events: all;
}


  
    Jane D Walker

How do i make my LinkedIn badge transition smoothly fade in and out?

1 Answers