Class and ID

HTML & CSS
1

Can you have a class with a z-index of say 1, and its ID -1? Like :


<div class="myClass" id="myID"></div>

.myClass {

z-index:1;

}

#myID {

z-index:-1;

}
2

Asking cause, I’d like to be able to hover over the image to have the speech bubble show while having the blurred halo on her.

https://codepen.io/cpUserpen/pen/RwGmqwJ?editors=1100

3

can you do it? yes.
What will happen?
If I recall correctly, the div will have a z-index of -1.
Why?
The div receives both CSS rules, but the ID-based rule is more specific than the class-based one (since there can be only one element with a given ID, but potentially many with a given class), and so the more specific rule is applied.

CSS attributes are unique and overwriting. If multiple rules apply z-indexes to an element, the element ends up with exactly one z-index, in the same way that applying color: blue and color: red to an element doesn’t make text purple, it makes it either blue or red.

2 Likes
4

I already gave you an example of how to do that but you have reverted back to using your methods again:(

You are still using separate empty elements that have no structure and are not semantic and have no intrinsic relationship with each other. You need to group elements together and it makes it so much easier.

Html is not like drawing a picture :slight_smile:

You can fix this latest example by adding pointer-events:none to .blur but you could have achieved the result without the separate div if you’d studied my previous example :slight_smile:

e.g. Like this:

3 Likes
5

@PaulOB I just worked it out :slight_smile:

<div class="avatar" data-tooltip="Hey!">
<div class="blur"></div>
</div>

*, *::before, *::after {
  box-sizing: border-box
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background:purple;
}

.avatar {
  margin-top:-65px; 
  margin-left:15px;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background-image: url('https://i.ibb.co/q0C4D4M/58461451-594363321051717-6049779766507077632-n.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.avatar::before, 
.avatar::after {
  --scale: 0;
  --arrow-size: 10px; 
  --tooltip-color: #333;

  position: absolute; 
  top: -.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
  transition: 150ms transform;
  transform-origin: bottom center;
}

.avatar::before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip);
  color: white;
  font-size:18px;
  font-family:Segoe UI, Arial, Verdana, Georgia;
  padding: 1rem;
  border-radius: 50%;
  text-align: center;
  width: max-content;
  max-width: 100%;
  background: var(--tooltip-color);
  filter: drop-shadow(3px 3px 4px #a050ad);
}

.avatar:hover::before,
.avatar:hover::after {
  --scale: 1;
}

.avatar::after {
  --translate-y: calc(-1 * var(--arrow-size));

  content: '';
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
  filter: drop-shadow(3px 3px 4px #a050ad);
}

.blur{
  background:none;
  content: "";
  position: absolute;
  left: -5px;
  top: -7px;
  width: 185px;
  height: 192px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 5px 18px rgba(128, 0, 128, 1),
    inset 0px 0px 15px 18px transparent;
  opacity: 1;
  filter: blur(3px);
  z-index:0; 
}

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.