Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question about 16d #53

Open
StudioProgrammar opened this issue Jul 14, 2023 · 0 comments
Open

Question about 16d #53

StudioProgrammar opened this issue Jul 14, 2023 · 0 comments

Comments

@StudioProgrammar
Copy link

Hey, could someone explain to me why we had to use display: inline-block in the .profile-picture-container in lesson 16d? This lesson is about creating and showing a tooltip for the channel picture. When I removed the line, there wasn't a noticeable difference to me. Here's the code from the solution:

HTML
...

  <div class="video-preview">
    ...
    <div class="video-info-grid">
      <div class="channel-picture">
        <div class="profile-picture-container">
          <a href="https://youtube.com/c/mkbhd" target="_blank">
            <img class="profile-picture" src="channel-pictures/channel-1.jpeg">
          </a>
          <div class="channel-tooltip">
            <img class="channel-tooltip-picture" src="channel-pictures/channel-1.jpeg">
            <div>
              <div class="channel-tooltip-name">
                Marques Brownlee
              </div>
              <div class="channel-tooltip-stats">
                15M subscribers
              </div>
            </div>
          </div>
        </div>
      </div>
      ...
    </div>
  </div>

...

CSS:

.profile-picture-container {
position: relative;
display: inline-block;
}

.channel-tooltip {
background-color: white;
width: 200px;
padding: 12px 12px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
border-radius: 6px;
position: absolute;
top: 55px;
z-index: 300;

opacity: 0;
pointer-events: none;

display: flex;
align-items: center;
transition: opacity 0.15s;
}

.profile-picture-container:hover .channel-tooltip {
opacity: 1;
}

.channel-tooltip-picture {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 8px;
}

.channel-tooltip-name {
font-family: Roboto, Arial;
font-weight: bold;
font-size: 16px;
margin-bottom: 4px;
}

.channel-tooltip-stats {
font-family: Roboto, Arial;
color: rgb(96, 96, 96);
font-size: 14px;
}

Thanks in advance!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant