问题描述:

I experimented a littlebit with transitions and wanted to show a caption for an image on :hover. This is what I got right now:

(I tried to resize the figure itself with the sizes of the image)

//Resize figure to image size

$(document).ready(function() {

$("figure>img").load(function() {

$(this).parent().width($(this).width());

});

});

figure {

display: table;

position: relative;

overflow: hidden;

}

figcaption {

position: absolute;

background: rgba(0, 0, 0, 0.75);

color: white;

padding: 10px 20px;

opacity: 0;

/* unvisible to fade in later */

bottom: 0;

left: 0;

display: none;

/* unvisible to fade in later */

-webkit-transition: all 0.6s ease;

-moz-transition: all 0.6s ease;

-o-transition: all 0.6s ease;

}

figure:hover figcaption {

opacity: 1;

/* visible */

left: 0;

display: inline-block;

/* visible */

}

.img-middle {

height: 60%;

width: 60%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<figure>

<img class="img-middle" src="img/test.png" alt="" width="700" height="500"></img>

<figcaption>This is a cool caption</figcaption>

</figure>

网友答案:

is this what you were going for?

figcaption {
  position: absolute;
  display: block;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  height: 100%;
  overflow: hidden;
  width: 0;
  /* unvisible to fade in later */
  top: 0;
  left: 0;
  /* unvisible to fade in later */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
}
figure {
  display: table;
  position: relative;
  overflow: hidden;
  border: 1px solid;
  /**
  * only an example
  */
  width: 500px;
  height: 100px;
}
figure img {
  display: block;
  width: 100%%;
  height: 100%;
}
figure > .image-container {
  width: auto;
  display: block;
  width: 80%;
  margin: 0 auto;
}
figure > .image-container:hover {
  width: 100%;
}
figure > .image-container:hover figcaption {
  padding: 10px 20px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <div class="image-container">
    <img class="img-middle" src="http://lorempixel.com/400/200/" alt="" width="100%" />
    <figcaption>This is a cool caption</figcaption>
  </div>
</figure>
相关阅读:
Top