用css创建一个悬停效果

I am learning to create hover effect with images and text.

我正在学习用图像和文本创建悬停效果。

What I have is this:

我有的是这个:

<ul class="photo-grid">
    <li>
        <a href="">
            <figure>
                <img src="img/imageone" height="180" width="320" alt="Arc de Triomphe">
                <figcaption><p>Image One</p></figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="">
            <figure>
                <img src="img/imagtwo" height="180" width="320" alt="Eiffel Tower">
                <figcaption><p>Image Two</p></figcaption>
            </figure>
        </a>
    </li>
    <li><a href="">
            <figure>
                <img src="img/imgthree" height="180" width="320" alt="Notre Dame">
                <figcaption><p>Image Three</p></figcaption>
            </figure>
        </a>
    </li>
</ul>

and css for this is

和css这个

.photo-grid {
    margin: 1em auto;
    max-width: 1106px;
    text-align: center;
}

.photo-grid li {
    border: 5px solid white;
    display: inline-block;
    margin: 1em;
    width: 289px;
}

.photo-grid img {
    display: block;
    height: auto;
    max-width: 100%;
}

.photo-grid figure {
    height: 163px;
    overflow: hidden;
    position: relative;
    width: 289px;
}

.photo-grid figcaption {
    background: rgba(0,0,0,0.8);
    color: white;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

.photo-grid figcaption p {
    display: table-cell;
    font-size: 1.5em;
    position: relative;
    top: -40px;
    width: 289px;
    vertical-align: middle;
}

.photo-grid li:hover figcaption {
    opacity: 1;
}

.photo-grid img {
    display: block;
    height: auto;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    max-width: 100%;
}

.photo-grid li:hover img {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    transform: scale(1.4);
}

.photo-grid figcaption p {
    display: table-cell;
    font-size: 1.5em;
    position: relative;
    top: -40px;
    width: 289px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    vertical-align: middle;
}

.photo-grid li:hover figcaption p {
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.photo-grid figcaption {
    background: rgba(0,0,0,0.8);
    color: white;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms;
    z-index: 100;
}

It is working fine, I have the image in a square/rectangle shape and when I move the cursor over it the image fades and I get a text. But here I need few changes,

它工作正常,我有一个方形/矩形形状的图像,当我将光标移动到它上面时,图像消失,我得到一个文本。但在这里我需要一些改变,

1) A text needs to be displayed along with the image (preferably over the image)
2) When the cursor is moved over the image another set of text should get displayed (which is also getting displayed with the current code) but the square image should get converted to a circle.

1 个解决方案

#1

Try this

in html part

在HTML部分

.photo-grid {
  margin: 1em auto;
  max-width: 1106px;
  text-align: left;
  margin-left: 5%;
}
.photo-grid li {
  border: 5px solid white;
  display: inline-block;
  margin: 1em;
  width: 289px;
}
.photo-grid img {
  display: block;
  height: 300px;
  width: 300px;
  max-width: 100%;
  position: absolute;
}
.photo-grid figure {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 300px;
}
.photo-grid figcaption {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: table;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}
.photo-grid figcaption p {
  display: table-cell;
  font-size: 1.5em;
  position: relative;
  top: -40px;
  width: 289px;
  vertical-align: middle;
}
.photo-grid li:hover figcaption {
  opacity: 1;
}
.photo-grid:hover figure {
  border-radius: 50%
}
.photo-grid figcaption p {
  display: table-cell;
  font-size: 1.5em;
  position: relative;
  top: -40px;
  width: 289px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  vertical-align: middle;
  height: 300px;
  width: 300px;
  text-align: center;
}
.photo-grid li:hover figcaption p {
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
.photo-grid figcaption {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: table;
  height: 300px;
  width: 300px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  transition-delay: 100ms;
  z-index: 100;
}
#text {
  z-index: 100;
  position: absolute;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  left: 1px;
  top: 145px;
  text-align: center;
}
#text:hover {
  opacity: 0;
}

<ul class="photo-grid">
  <li>
    <a href="">
      <figure>
        <img src="img/imageone" height="180" width="320" alt="Arc de Triomphe">
        <figcaption>
          <p>Image One</p>
        </figcaption>
        <p id="text">Text One</p>
      </figure>
    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="img/imagtwo" height="180" width="320" alt="Eiffel Tower">
        <figcaption>
          <p>Image Two</p>
        </figcaption>
        <p id="text">Text Two</p>
      </figure>
    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="img/imgthree" height="180" width="320" alt="Notre Dame">
        <figcaption>
          <p>Image Three</p>
        </figcaption>
        <p id="text">Text Three</p>
      </figure>
    </a>
  </li>
</ul>