CODEWITHSUNDEEP
javascripthtmlcsshoveronhover
Jhine7
Jhine7

Reputation: 75

How to include text with hover overlay image - HTML, CSS, JavaScript only

Below is code that once hovered over the shape words will appear behind. Having two problems here: 1. If I make the font small (24px), the dark grey will not cover the whole shape. 2. I want to include words with the hover, e.g. I want it to display information on the shape before hovering, then fade away with the shape to show the new info behind it. Like a name fading away to give a bio.

I used w2schools to compile this: https://www.w3schools.com/code/tryit.asp?filename=FT2LEOI9SQQN

<html>

<div id="box">

  <div id="overlay">
    <span id="plus">Hello<br>Hi</span>
  </div>

</div>

<style>
body {
  background: #e7e7e7;
}
#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;

}

#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
}

#box:hover #overlay {
  opacity: 1;
}

#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}

</style>
</html>

Upvotes: 0

Views: 379

Answers (1)

Hamad
Hamad

Reputation: 161

Kindly have a look over the modified Code, It's now covering the whole Div. I am a bit fuzzy about your second point, hope will solve it also. I have tested the code, You can test also, next time be careful to use your own Editor for better output. If the Code Solve your problem, then Vote Up to Acknowledge our effort. Thank You. Best Wishes,

<html>
<head>
<title>
</title>
<style>
body {
  background: #e7e7e7;
}
#box {
  width: 300px;
  height: 177px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;

}

#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
}

#box:hover #overlay {
  opacity: 1;
}

#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}

</style>

</head>
<div id="box">

  <div id="overlay">
    <span id="plus">Hello<br>Hi</span>
  </div>

</div>

</html>

Upvotes: 2

Related Questions