InsaneJournal

Tweak says, "I say!"

chromaticqueen (

chromaticqueen) wrote in

rp_tutorials,

For the menus in the actual post? I used a modified version of this.

This:

.the-content { width: 700px; }

.info-box {
   float: left;
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 0;
   overflow: hidden;
   position: relative;
   text-align: center;
   vertical-align: top;
   cursor: default;
   background: transparent; }

.info-box h2 {
  font-size: 2em;
  color: white;
  font-family: Georgia, serif;
  text-shadow: 0 2px 3px rgba(0,0,0,.7);  }
  
.info-box .hidden {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.info-box .hidden h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 1em;
   padding: 5px;
   text-shadow: 0 2px 3px rgba(0,0,0,.7);
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0;
}

.info-box .hidden .info-box-links a {
   display: block;
   text-decoration: none;
   padding: 3px 5px;
   margin: 0 10px 3px 10px;
   background: rgba(0,0,0,0.8);
   font-size: .8em;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}

.info-box .hidden .info-box-links a:hover {
	background: rgba(0,0,0,1);
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.info-box .hidden {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(109,72,143,1);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.info-box .hidden h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.info-box .hidden .info-box-links a {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.info-box:hover .hidden {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.info-box:hover .hidden h2,
.info-box:hover .hidden .info-box-links a {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.info-box:hover .hidden .info-box-links a {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

is the part of her code that controls the animated menus. That CSS can be added into any journal layout.

If you're talking about the navigation links on the side, that's part of the code in this chestnutgallery layout. I just modified it a lot.

(Read comments)

InsaneJournal

Post a comment in response: