Displaying div when hovered

Displaying div when hovered

by CreativeTechnocrayts CreativeTechnocrayts

HTML

<div class=”creative-content”>
  <a class="featured-image">
    <h3>Displaying a child on hovering the parent</h3>
    <p>
      Loreum ipsum dolor siet amet, consective apo dolor set
    </p>
    <a class="mt-20">Read more</a>
  </a>
</div>

<h3>display a div on hovering a sibling link</h3>
<a class="hover-link">Hover me</a>
<div>You can display a div when hovering a sibling link</div>

CSS

a {
  cursor: pointer;
}

.featured-image {
  padding: 15px 20px;
  background: #eceaff;
  border: 1px solid red;
  display: inline-block;
  width: 100%;
  cursor: pointer;
}
.mt-20{
  margin-top:20px;
}
.featured-image h1 {
  font-size: 14px;
}

.featured-image p {
  display: none;
  opacity: 0;
}

.featured-image:hover p {
  display: block;
  opacity: 1;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.hover-link ~ div {
  display: none;
  opacity: 0;
}

.hover-link:hover ~ div {
  display: block;
  opacity: 1;
}

.square {
  width: 400px;
  height: 400px;
  position: relative;
  background: #000;
  opacity: 1;
  display: inline-block;
  border: 1px solid;
}
.hover-content{
  width:200px;
  height:200px;
  background:rgba(255,255,255,0.5);
  padding:10px;
  margin:0 auto;
  position:absolute;
  top:50%;
  left:50%;
  transition:translate(-50%,-50%);
  -webkit-transition:translate(-50%,-50%);
}