将悬停更改为触摸

Question

我正在尝试 this effect touch-friendly。我有一个包含标题和描述的缩略图画廊。标题在加载时显示，当用户将鼠标悬停在缩略图上时，他们会看到更长的描述。然后他们可以单击整个图像转到 linked 页面。

我尝试了几个选项，例如 this one，但 none 似乎有效。如果悬停充当显示字幕信息的触摸，我会很好，第二次触摸将打开分配给图像的 link。现在，第一次触摸会显示半秒的描述，然后是 link.

我对 CSS 或 js 选项持开放态度 - 我只是需要一些东西来工作！

.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

Answer 1

这可能就是您要找的。

.hvrbox,
.hvrbox * {
  box-sizing: border-box;
}

.hvrbox {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 400px;
  height: auto;
}

.hvrbox img {
  max-width: 100%;
}

.hvrbox-text a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  padding: 5px;
  border: 2px solid #ffffff;
}

.hvrbox .hvrbox-layer_bottom {
  display: block;
}

.hvrbox .hvrbox-layer_top {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 15px;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
  opacity: 1;
}

.hvrbox .hvrbox-text {
  text-align: center;
  font-size: 18px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hvrbox .hvrbox-text_mobile {
  font-size: 15px;
  border-top: 1px solid rgb(179, 179, 179);
  /* for old browsers */
  border-top: 1px solid rgba(179, 179, 179, 0.7);
  margin-top: 5px;
  padding-top: 2px;
  display: none;
}

.hvrbox.active .hvrbox-text_mobile {
  display: block;
}

.hvrbox .hvrbox-layer_slideup {
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

<div class="hvrbox">
  <img src="https://picsum.photos/5760/3840?image=1067" alt="Mountains" class="hvrbox-layer_bottom">
  <div class="hvrbox-layer_top hvrbox-layer_slideup">
    <div class="hvrbox-text"><a href="http://www.goolge.com">Take me to Goolge</a></div>
  </div>
</div>

将悬停更改为触摸

Change hover to touch

html

css

hover

touch