Question

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

我拥有的是：

<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>

和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;
}

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

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.

Answer 1

试试这个

在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>

用css创建一个悬停效果

1 个答案: