CSS:Connect Quadrants

From UBC Wiki

Overview

Connectquadrant.png

Connect Quadrants is a fancy animation that allows you to navigate different section of instructor resources. You can access to the quadrant from the URL below: http://elearning.ubc.ca/connect/instructor-resources/

How to Use

The connect quadrants is based on the Original Hover Effects with CSS3 by Codrops. I used the same animation as the Demo 5

Below is the brief overview of the HTML.

Connectquadrant explanation.jpg
  • For the full HTML source code, please refer to the HTML section below.

FAQ

Q: The animation causes a weird blink in Chrome!
A: In Custom CSS, add -webkit-transform: translate3D(0, 0, 0) to div ID (or div Class). In this case, I added this code to #blue,#orange,#purple and #green.

Q:How do I change the speed of an animation?
A:Go through the custom CSS, and change the number in the part that says -webkit-transition, -moz-transition,-o-transition and -ms-transition (there are multiple transitions on the same CSS to make sure it works in all of the web browsers). Right now, all the animation are 0.3 sec, but you can change it to 0.1 sec or even 1 sec.

HTML

Below is the HTML code for back up purpose. 

<div id="ConnectQuadrant_Box">
<div id="blue"><div class="view view-fourth"><img class="alignleft" src="/files/2012/06/qslice_01.png" alt="" width="280" height="160" />
<div class="mask">
<h2>Course Content </h2>
Connect has a wide variety of tools that allow you to create, organize and distribute course materials</br>
<a class="info" href="/connect/instructor-resources/course-content/">Read More</a>
</div>
</div>
</div>
<div id="green">
<div class="view view-fifth"><img class="alignleft" src="/files/2012/06/qslice_02.png" alt="" width="280" height="160" />
<div class="mask">
<h2>Communicate & Collaborate</h2>
Connect has a wide variety of tools that enhance communication and collaboration</br>
<a class="info" href="/connect/instructor-resources/communicate-and-collaborate/">Read More</a>
</div>
</div>
</div>
</br>
<div id="orange">
<div class="view view-fourth"><img class="alignleft" src="/files/2012/06/qslice_03.png" alt="" width="280" height="160" />
<div class="mask">
<h2>Assess Student Learning</h2>
Connect has a variety of tools that allow you to create, assign and grade assignments and assessments.</br>
<a class="info" href="/connect/instructor-resources/assess-student-learning/">Read More</a>
</div>
</div>
</div>
<div id="purple">
<div class="view view-fifth"><img class="alignleft" src="/files/2012/06/qslice_04.png" alt="" width="280" height="160" />
<div class="mask">
<h2>Course Management</h2>
Connect has a number of tools to help you manage your course such as a powerful grade center and early warning system.</br>
<a class="info" href="/connect/instructor-resources/course-management/">Read More</a>
</div>
</div>
</div>
</div>

CSS

Below is a CSS with an explanation 

/*This wraps up the quadrants*/

#ConnectQuadrant_Box{
padding-top:30px;
height:370px;}
.view/*This will control how the quadrant looks when you hover*/ {
    width: 280px;
    height: 160px;
    margin: 0;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
/*This is a mask which will hide the content*/

.view .mask, .view .content {
    width: 280px;
    height: 160px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative
}

/*Control how the header in the description looks*/

.view h2  {
    text-transform: uppercase;

    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 2px;
    margin: 10px 0 0 0;

}

/*Control how the paragraph in the description looks*/

.view p  {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;

    padding: 10px 20px 20px;
    text-align: center

}
/*This is how the read more button looks*/

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 3px 10px;
background: #000;
    color: #fff;
    text-transform: uppercase;

}
/*This is how the read more button look when you hover*/

.view a.info:hover {
    box-shadow: 0 0 5px #000
}

/*This controls the animation of the left side of the quadrant*/

.view-fourth img  {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}
.view-fourth .mask {
   -webkit-transform: translateX(280px);
   -moz-transform: translateX(280px);
   -o-transform: translateX(280px);
   -ms-transform: translateX(280px);
   transform: translateX(280px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-fourth h2 {
   color: #000;

}
.view-fourth p { 
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   color: #333;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-fourth:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);

}
.view-fourth:hover img {
   -webkit-transform: translateX(-280px);
   -moz-transform: translateX(-280px);
   -o-transform: translateX(-280px);
   -ms-transform: translateX(-280px);
   transform: translateX(-280px);
}
.view-fourth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

/*This controls the animation for the right side of the quadrant*/

.view-fifth img {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;


}

.view-fifth .mask {
   -webkit-transform: translateX(-280px);
   -moz-transform: translateX(-280px);
   -o-transform: translateX(-280px);
   -ms-transform: translateX(-280px);
   transform: translateX(-280px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
   color: #000;

}
.view-fifth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   color: #333;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-fifth:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);

}
.view-fifth:hover img {
   -webkit-transform: translateX(280px);
   -moz-transform: translateX(280px);
   -o-transform: translateX(280px);
   -ms-transform: translateX(280px);
   transform: translateX(280px);

}
.view-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;

}
Retrieved from "https://wiki.ubc.ca/index.php?title=CSS:Connect_Quadrants&oldid=188545"