CODEWITHSUNDEEP
jqueryhtmlcss
Herro2689
Herro2689

Reputation: 81

Trying to make text appear over an image when hovering (possibly not using the right properties)

I'm creating a draft 'Meet the Team' style page for my work and am trying to make the image of each person disappear when you hover over it and text appear that will explain what they do. At the moment, all I'm using is the hover: property which doesn't seem to be doing anything. Here's my code below;

.info {
  display: inline-block;
  width: 32%;
  height: 300px;
  margin-top: 5px;
  text-align: center;
  background: #CFCFCF;
}
.info h5 {
  display: block;
  background: white;
  margin: 0;
}
.info p {
  display: block;
  padding-top: 10px;
  margin: 0;
}
.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
}
.hoverinfo:hover p {
  background-color: #C4C4C4;
  width: 32%;
  height: 300px;
  border: 1px solid black;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="meet.css">
  <h1>Meet the Team</h1>
</head>

<body>

  <div id="joe" class="info">
    <h5>Joe Bloggs</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="john" class="info">
    <h5>John Smith</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="jane" class="info">
    <h5>Jane Doe</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="joe" class="info">
    <h5>Joe Bloggs</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="john" class="info">
    <h5>John Smith</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="jane" class="info">
    <h5>Jane Doe</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

I am a bit of a beginner at this, so I know that I'm probably not using the right thing. Would it make more sense to use the animate property to fade the image out and fade the text in. Also after digging around, some people were mentioning using jQuery which I don't have any experience with thus far. Anyway, if anyone could help with what I'm trying to do, it would be much appreciated!

Thanks

Upvotes: 2

Views: 94

Answers (1)

HendrikEng
HendrikEng

Reputation: 684

You just have to hide the class or ID with display:none and set class/ID:hover to display:block.

To fade the image in or out, you could use opacity instead of display:none; and use a css transition like ease.in/out

Updated code to keep the Text centered in proportion to the image

.container {
  display: inline-block;
  height: 320px;
  width: 200px;
  background: white;
  text-align: center;
}
.hoverinfo {
  width: 200px;
  height: 300px;
  background: #CFCFCF;
  position: relative;
}

.hovertext {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovertext {
  opacity: 1;
  transition: all .5s ease-in;
}
.hoverinfo:hover .hoverimage {
  opacity: 0;
  transition: all .5s ease-out;
}
<div class="container">
  <h5 class="headline">Joe Bloggs</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>
<div class="container">
  <h5 class="headline">Joe Bloggings</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>
<div class="container">
  <h5 class="headline">Joe Bloggers</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>
<div class="container">
  <h5 class="headline">Jane Bloggers</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>

Upvotes: 1

Related Questions