如何在 WEBKIT TRANSITION BOX 中触发 ON-HOVER CONTENT答案

【问题标题】：How to trigger ON-HOVER CONTENT in WEBKIT TRANSITION BOX如何在 WEBKIT TRANSITION BOX 中触发 ON-HOVER CONTENT
【发布时间】：2015-07-05 10:59:14
【问题描述】：

我正在尝试将一些图片（带有超链接）放入悬停展开的 DIV BOX > 一旦框在（5 秒后）完全打开。

我做了一个非常糟糕的尝试，通过创建一个 zaxis 并使内容显示在可折叠的可展开框上。

<!DOCTYPE html>
 <html>
 <head>


 <style type="text/css">

 div {
 width: 10px;
 height: 600px;
 background: rgba(55, 55, 55, .8);
 -webkit-transition-property: width; /* Safari */
 -webkit-transition-duration: 4s; /* Safari */
 -webkit-transition-delay: 2s; /* Safari */
 transition-property: width;
 transition-duration: 5s;
 transition-delay: 0s;
 }

 html {
background: url(BG1.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 }


 div:hover {
 width: 600px;
 }

 div.image55:after {
 content:url(http://placehold.it/350x150);
 }

 .style2 {
text-align: right;
font-family: "Calibri Light";
 }
 .style3 {
border-width: 0;
 }

 </style>
 </head>
 <body>

 <div class="style2"><br>
<a href=""><img alt="" src="editorial.png" width="100" height="20"    
 class="style3"></a></div>
<div class="image55" style="position: absolute; left: 20px; top: 20px; 
 z-index: 1"></div>

 </body>
 </html>

【问题讨论】：

标签： html css webkit axis onhover

【解决方案1】：

我不知道我是否理解你。我制作了一个Pen 并附上了我认为您想要实现的示例。

告诉我你是否想要。

这里是 HTML

<div class="wrapper">
  <div class="blocks">
    <a href="#">
      <img src="http://placehold.it/350x150" width="350" height="150" alt="" />
    </a>
    <a href="#">
      <img src="http://placehold.it/350x150" width="350" height="150" alt="" />
    </a>
  </div>
</div>

这里是 CSS。

body {
  background-color: #fafafa;
}
.wrapper {
  margin: 0 auto;
  max-width: 1200px;
}
.blocks {
  text-align: center;
}
.blocks a {
  margin: 1em;
  height: 150px;
  position: relative;
  display: inline-block;
  border: 1px solid #c1c1c1;
}
.blocks a::after {
  top: 0;
  right: 0;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fafafa;
  -webkit-transition: all 5s linear;
  transition: all 5s linear;
}
.blocks a:hover::after {
  width: 0;
  -webkit-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
}

【讨论】：

【解决方案2】：

所以这正是我的意思。透明框在屏幕上打开超过 5 秒，但我无法让图片在打开后在透明框中不可见。

 <html>
 <head>


 <style type="text/css">

 div {
 width: 10px;
 height: 600px;
 background: rgba(55, 55, 55, .8);
 -webkit-transition-property: width; /* Safari */
 -webkit-transition-duration: 4s; /* Safari */
 -webkit-transition-delay: 2s; /* Safari */
 transition-property: width;
 transition-duration: 5s;
 transition-delay: 0s;
 }

 .image1 {
position: absolute;
width:99px;
height:150px;   
 visibility:hidden;
 }


 html {
background: url(BG1.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
  }


  div:hover {
  width: 98%;   
visibility:visible;
  }


  .style2 {
text-align: right;
font-family: "Calibri Light";
  }
  .style3 {
border-width: 0;
  }
  .style4 {
font-family: "Times New Roman", Times, serif;
color: #FFFFFF;
  }
  </style>
  </head>
  <body>

  <p class="image1" style=" left: 200px; top: 200px; width: 99px; height:  
  150px;"><img src="../../../s102.jpg"></p>

  <div class="style2"><br>
<a href=""><img alt="" src="editorial.png" width="100" height="20"    
  class="style3"></a></div>



  </body>
  </html>

【讨论】：