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;
}
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;
}<body>
<div>
<h1 class="Heading">Jane D Walker</h1>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="g-mail-assistance-704528251" data-version="v1">
<a class="badge-base__link LI-simple-link" href="https://pk.linkedin.com/in/g-mail-assistance-704528251?trk=profile-badge"></a>
</div>
</div>
<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
</body>