CSS - Set sibbling styles on hover

A brief example of how to set sibbling styles on hover event.

by Rodwyn Moreno

HTML

<div class="container">
  <div class="parent">
    <button class="button">I'm a button</button>
    <div>random other elements</div>
    <div>random other elements</div>  
    <div>random other elements</div>
    <div
      class="title"
      data-title="I'm the first title."
      data-subtitle="I'm the second title.">Title
    </div>
  </div>
</div>

CSS

.parent {
  border: #0f0 solid thin;
  display: flex;
  flex-direction: column-reverse;
}

.title {
  position: relative;
  background: #fff;
}

.title:after {
  content: attr(data-subtitle);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  background: inherit;
  transition: .4s,opacity .6s;
}

.button:hover ~ .title:after {
    opacity: 1;
}
.container {
  display: flex;
}