InsidiousMike InsidiousMike - 4 years ago 147
HTML Question

Transition between image to text within div

I am trying to get a transition between an image and text. A screenshot of my site is here which shows the image of a film. On hover i want the description of the film, which will be

$row['description']
to transition in and then on click be taken to the relevant page.

<div class="row">
<?php
$numrow = 1;
while($row = mysqli_fetch_assoc($result)){
echo "<div class='col-lg-3 col-sm-4 col-xs-6'>";
echo "<a href='#' class='thumbnail'>";
echo "<img class='img-responsive' src='http://url/assets/posters/".$row['id']."_medium.jpg'>";
echo "</a></div>";
} ?>
</div>


Im not really sure where to start so appologies for the the lack of information. All suggestions are appreciated.

Answer Source

Okay, consider posting your HTML for better answers. This would serve you as a start. You need to have both the image and the text in the same <div> with an absolute position. And you can apply the hover styles like this, just using CSS alone:

.item {position: relative; border: 1px solid #999; border-radius: 5px; overflow: hidden; width: 250px; height: 330px; cursor: pointer; display: inline-block;}
.item img,
.item p {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 5px; text-align: center; background-color: rgba(255,255,255,0.65); margin: 0; z-index: 1; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.item p {padding: 5px; z-index: 2; opacity: 0;}
.item:hover p {opacity: 1;}
.item:hover img {opacity: 0.25;}
<div class="item">
  <img src="http://lorempixel.com/240/320/nature/1/" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum a eligendi sunt necessitatibus? Consequuntur, animi neque architecto.</p>
</div>
<div class="item">
  <img src="http://lorempixel.com/240/320/cats/1/" alt="" />
  <p>Nihil fugiat fuga sequi unde eum sunt alias doloribus obcaecati aut nostrum! Rerum, sint repellat reprehenderit dolorum quis inventore!</p>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download