CODEWITHSUNDEEP
htmlcss
Herro2689
Herro2689

Reputation: 81

CSS Transition not working as it should (text appears elsewhere)

I'm desperately trying to figure this out. I had some help from people on here yesterday which was really appreciated and I am getting somewhere, but for some reason my transition property isn't working as it should. Where I want to be able to hover over a persons image as shown below, the underlying text (that should be there) appears top center of the page for everyone. There should be separate centered text behind each person.

How it works at the moment

HTML

<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 class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

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

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

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

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

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

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

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

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>

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

  <div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

</div>


</body>
</html>

CSS

.info {

  display: inline-block;

  width: 32%;

  height: 375px;

  margin-top: 5px;

  text-align: center;

  background: #FFFFFF;

}

.info h5 {

  display: block;

  background: white;

  margin: 0;

}
.hovercontent {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
    opacity: 1;
    transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
    opacity: 0;
    transition: all .5s ease-out; 
}

I'm really not sure how to get it working. Also, ideally, I'd like to keep the page to 3 people in a row if I can and I don't want the image size to change.

Again, any help is much appreciated.

Thanks

Upvotes: 1

Views: 60

Answers (2)

Herro2689
Herro2689

Reputation: 81

.info {
  position: relative;
  display: inline-block;

  width: 32%;

  height: 375px;

  margin-top: 5px;

  text-align: center;

  background: #FFFFFF;

}

.info h5 {

  display: block;

  background: white;

  margin: 0;

}
.hovercontent {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
    opacity: 1;
    transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
    opacity: 0;
    transition: all .5s ease-out; 
}
<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>

Upvotes: 0

Troyer
Troyer

Reputation: 7013

You are missing position relative to .info, that's why the .hovercontent is not positioning correctly :

.info {
  position: relative;
}

Snippet: 

.info {
  position: relative;
  display: inline-block;

  width: 32%;

  height: 375px;

  margin-top: 5px;

  text-align: center;

  background: #FFFFFF;

}

.info h5 {

  display: block;

  background: white;

  margin: 0;

}
.hovercontent {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
    opacity: 1;
    transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
    opacity: 0;
    transition: all .5s ease-out; 
}
<div id="joe" class="info"> 
  <h5>Joe Bloggs</h5>

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>

  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

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

  <div class="hoverinfo"> <img class="hover" src="http://placehold.it/150x375.png" border="0" /> 
    <p class="hovercontent">Test paragraph</p>
  </div>

</div>

Upvotes: 2

Related Questions