How to trigger ON-HOVER CONTENT in WEBKIT TRANSITION BOX

Question

I am trying to put some pictures (with hyperlinks) in the on hover expanding DIV BOX > once the box is fully opened after (5 seconds).

I have made a really bad attempt to do this by creating a zaxis and to make the content appear over the collapsible expandable box.

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

score 0 · Answer 1 · answered Jul 05 '15 at 11:39

I don't know if I have understood you well. I have made a Pen with a example of what I think you would like to achieve.

Tell me if is that you want.

Here is the 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>

And here is the 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;
}

score 0 · Answer 2 · answered Jul 05 '15 at 18:33

So this is exactly what I meant. The transparent box opens across the screen over 5 seconds, but I cannot get the picture to be invisible and then visible within the transparent box once it has opened.

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

How to trigger ON-HOVER CONTENT in WEBKIT TRANSITION BOX

2 Answers2