Your IP : 216.73.216.187
/*
* name FavImageHover
* version 2.1
* description Responsive and customizable Joomla!3 module
* demo http://extensions.favthemes.com/favimagehover
* author FavThemes
* author URL http://www.favthemes.com
* copyright Copyright (C) 2012-2018 FavThemes.com. All Rights Reserved.
* license Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
*/
/*
////////////////////////////////////////////////////////////////////////////////
1. reset
2. layout
3. content
4. layout effects
////////////////////////////////////////////////////////////////////////////////
*/
/*/
////////////////////////////////////////////////////////////////////////////////
///
/// favimagehover css
///
////////////////////////////////////////////////////////////////////////////////
/*/
/*//////////////////////////////////////////////////////////////////////////////
1. reset
//////////////////////////////////////////////////////////////////////////////*/
div[id^="favimagehover"] a,
div[id*=" favimagehover"] a,
div[id^="favimagehover"] a:hover,
div[id*=" favimagehover"] a:hover,
div[id^="favimagehover"] a:focus,
div[id*=" favimagehover"] a:focus {
text-decoration: none!important;
}
/*//////////////////////////////////////////////////////////////////////////////
2. layout
//////////////////////////////////////////////////////////////////////////////*/
div[id^="favimagehover-box"],
div[id*=" favimagehover-box"] {
position: relative;
overflow: hidden;
margin-bottom: 14px;
margin-top: 14px;
}
/*//////////////////////////////////////////////////////////////////////////////
3. content
//////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////
///
/// image
///
//////////////////////////////////////////////////////////////////////////////*/
div[id^="favimagehover-image"],
div[id*=" favimagehover-image"] {
height: 100%;
text-align: center;
line-height: 0;
}
div[id^="favimagehover-image"] img,
div[id*=" favimagehover-image"] img {
width: 100%;
}
div[id^="favimagehover-image-container"],
div[id*=" favimagehover-image-container"] {
position: relative;
}
/*//////////////////////////////////////////////////////////////////////////////
///
/// overlay
///
//////////////////////////////////////////////////////////////////////////////*/
div[id^="favimagehover-overlay"],
div[id*=" favimagehover-overlay"] {
opacity:0; filter: alpha(opacity = 0);
position: absolute;
width:100%;
height:100%;
overflow: auto;
top: 0;
left: 0;
}
div[id^="favimagehover-overlay"]:hover,
div[id*=" favimagehover-overlay"]:hover,
div[id^="favimagehover-overlay"]:focus,
div[id*=" favimagehover-overlay"]:focus {
background-color: #111;
opacity:0.8; filter: alpha(opacity = 80);
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
div[id^="favimagehover-overlay"] p,
div[id*=" favimagehover-overlay"] p {
padding: 8% 6% 4%;
margin-bottom: 0;
}
/*//////////////////////////////////////////////////////////////////////////////
///
/// title
///
//////////////////////////////////////////////////////////////////////////////*/
h4[id^="favimagehover-title"],
h4[id*=" favimagehover-title"] {
margin-top: 0 !important;
font-weight: normal;
}
/*//////////////////////////////////////////////////////////////////////////////
///
/// read more
///
//////////////////////////////////////////////////////////////////////////////*/
div[id^="favimagehover-readmore"] a.btn,
div[id*=" favimagehover-readmore"] a.btn {
background-image: none;
border: 1px solid transparent;
text-shadow: none;
box-shadow: none;
}
div[id^="favimagehover-readmore"] a.btn:hover,
div[id*=" favimagehover-readmore"] a.btn:hover,
div[id^="favimagehover-readmore"] a.btn:focus,
div[id*=" favimagehover-readmore"] a.btn:focus {
border: 1px solid transparent;
box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.18), 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
}
.favimagehover-readmore {
padding-left: 6%;
padding-right: 6%;
}
/*//////////////////////////////////////////////////////////////////////////////
4. layout effects
//////////////////////////////////////////////////////////////////////////////*/
/*/
///
/// js classes
///
/*/
.favhide { opacity:0; }
.favshow { opacity:1; }
/*/
///
/// no layout effect
///
/*/
.layout-effect-none {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
/*/
///
/// layout effect 1
///
/*/
.layout-effect1 {
-webkit-animation-name: layout-effect1;
-moz-animation-name: layout-effect1;
animation-name: layout-effect1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes layout-effect1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes layout-effect1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*/
///
/// layout effect 2
///
/*/
.layout-effect2 {
-webkit-animation-name: layout-effect2;
-moz-animation-name: layout-effect2;
animation-name: layout-effect2;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect2 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect2 {
0% {
opacity: 0;
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect2 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: translate3d(0, -100%, 0);
transform: none;
}
}
/*/
///
/// layout effect 3
///
/*/
.layout-effect3 {
-webkit-animation-name: layout-effect3;
-moz-animation-name: layout-effect3;
animation-name: layout-effect3;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect3 {
0% {
opacity: 0;
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect3 {
0% {
opacity: 0;
-moz-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect3 {
0% {
opacity: 0;
-webkit-transform: translate3d(-25%, 0, 0);
-moz-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
/*/
///
/// layout effect 4
///
/*/
.layout-effect4 {
-webkit-animation-name: layout-effect4;
-moz-animation-name: layout-effect4;
animation-name: layout-effect4;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect4 {
0% {
opacity: 0;
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect4 {
0% {
opacity: 0;
-moz-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect4 {
0% {
opacity: 0;
-webkit-transform: translate3d(25%, 0, 0);
-moz-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
/*/
///
/// layout effect 5
///
/*/
.layout-effect5 {
-webkit-animation-name: layout-effect5;
-moz-animation-name: layout-effect5;
animation-name: layout-effect5;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect5 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect5 {
0% {
opacity: 0;
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect5 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
/*/
///
/// layout effect 6
///
/*/
.layout-effect6 {
-webkit-animation-name: layout-effect6;
-moz-animation-name: layout-effect6;
animation-name: layout-effect6;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect6 {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@-moz-keyframes layout-effect6 {
0% {
opacity: 0;
-moz-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes layout-effect6 {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-moz-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
/*/
///
/// layout effect 7
///
/*/
.layout-effect7 {
-webkit-animation-name: layout-effect7;
-moz-animation-name: layout-effect7;
animation-name: layout-effect7;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect7 {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
@-moz-keyframes layout-effect7 {
0%, 20%, 53%, 80%, 100% {
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-moz-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-moz-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-moz-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
@keyframes layout-effect7 {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
-moz-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
-moz-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
-moz-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
/*/
///
/// layout effect 8
///
/*/
.layout-effect8 {
-webkit-animation-name: layout-effect8;
-moz-animation-name: layout-effect8;
animation-name: layout-effect8;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect8 {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect8 {
0% {
opacity: 0;
-moz-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect8 {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-moz-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}