CODEWITHSUNDEEP
javascripthtmlcsshovercss-transitions
pandik70
pandik70

Reputation: 195

Writing over img on hover

I would like to put a decription text over image while hover. What is the best way to do it? Do I need any js or there is a css solution?

Instead of the divs in snippet I have images in the shape of circle. Hovering the img makes it little bigger as in example.

Thanks for help. 

.circle{
  width: 150px;
  height: 150px;
  background: yellow;
  border-radius: 100%;
  text-align:center;
  display: inline-block;
  transition: all .2s ease-in-out;
}
.circle:hover{
  transform: scale(1.1);
  
}
<div class="circle">

</div>
<div class="circle">

</div>
<div class="circle">

</div>

Upvotes: 0

Views: 56

Answers (2)

EyuelDK
EyuelDK

Reputation: 3199

Using only CSS and HTML attributes.

.circle {
  width: 150px;
  height: 150px;
  text-align: center;
  background: yellow;
  border-radius: 100%;
  position: relative;
  display: inline-block;
  transition: all .2s ease-in-out;
}

.circle:hover{
  transform: scale(1.1);
}

/* NEW CODE */
.circle:after {
  content: attr(data-desc);
  display: none;
  position: absolute;
  top: 50%;
  background-color: white;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle:hover:after {
  display: inline-block;
}
<div class="circle" data-desc="Hello"></div>
<div class="circle" data-desc="World"></div>
<div class="circle" data-desc="just wrap the img and it works">
  <img width="100%" height="100%" src="http://www.matmasar.wz.cz/kone.png">
</div>

Upvotes: 0

mehulmpt
mehulmpt

Reputation: 16587

.circle{
  width: 150px;
  height: 150px;
  background: yellow;
  border-radius: 100%;
  text-align:center;
  position: relative;
  display: inline-block;
  transition: all .2s ease-in-out;
}
.hoverContent {
  opacity: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
   transition: all .2s ease-in-out;

}
.circle:hover{
  transform: scale(1.1);
}

.circle:hover .hoverContent {
   opacity: 1;
}
<div class="circle">
  <span class="hoverContent">Hey there 1</span>
</div>
<div class="circle">
  <span class="hoverContent">Hey there 2</span>
</div>
<div class="circle">
  <span class="hoverContent">Hey there 3</span>
</div>

Upvotes: 1

Related Questions