Question

我正在尝试将一些图片（带有超链接）放在悬停展开的DIV BOX＆gt;一旦盒子在（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>

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

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

如何在WEBKIT TRANSITION BOX中触发ON-HOVER内容

2 个答案: