BrianaJHunter
3/11/2020 - 10:22 PM
Responsive Hover - ERRORS
<!--HTML-->
card-text{
padding: 25px 0;
}
.whatever {
height: 250px;
width: 100%;
border-radius: 5px;
margin: 0px;
}
/* card flip */
.image-flip:hover .backside,.image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.image-flip:hover .frontside,.image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s; transform-style:
preserve-3d;
position: relative;
}
.frontside {
position: relative;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
margin-bottom: 30px;
}
.backside {
position: absolute;
top: 0; left: 0;
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
.frontside,.backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
}
.frontside .card{
background-color: #rgba(11,92,59,0.0);
height: 200px;width: 250px;
}
.backside .card {
height: 300px;
width: 100%;
padding: 20px;
}
/* card flip end */
@media (max-width:981px){
.whatever{
width: 100%;
height: 150px;
padding: 10px;
}
.backside{
height: 100%;
width; 100%;
}
}
/* CSS */
card-header {
padding:0 !important;
}
card-body { background-color:#fff !important;}
.NautiliaPnl {background-image:url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/thb-nautilia.jpg");}
.BalsamiaPnl {background-image:url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/thb-balsamia.jpg");}
.ProvinciaPnl {background-image:url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/thb-provincia.jpg");}
.TerraPnl {background-image:url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/thb-terra.jpg");}
.NautiliaPnl, .BalsamiaPnl, .ProvinciaPnl, .TerraPnl {
background-attachment: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.ProductPanel {
background-color: rgba(255, 255, 255, .7);
background-blend-mode: overlay;
transition-timing-function: ease-in-out;
transition-delay: .1s;
transition-duration: .7s;
padding: 2em;
text-align: center;
}
.ProductPanel:hover,
.ProductPanel:active,
.ProductPanel:focus,
.ProductPanel.hover {
background-color: rgba(0, 127, 163, 1);
background-blend-mode: multiply;
color:#fff;
}
.ProductPanel img {
filter: grayscale(0.5) blur(10px);
}
.ProductPanel:hover img,
.ProductPanel:active img,
.ProductPanel:focus img,
.ProductPanel.hover img {
filter: grayscale(0.5) blur(10px);
}
.ProductPanel:hover .FeatTitle ,
.ProductPanel:active .FeatTitle ,
.ProductPanel:focus .FeatTitle ,
.ProductPanel.hover .FeatTitle {
filter: invert(100%);
transform:scale(1);
}
.HeroImg {
width: 100%;
}
.reverse {
color:#fff;
padding:1em;
}
.drk {
padding:1em;
}
.Nautilia {
background-image:url('https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/Nautilia.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.Balsamia {
background-image:url('https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/Balsamia.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.Provincia {
background-image:url('https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/Provincia.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.Terra {
background-image:url('https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/Terra.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.GenuineWood {
background-image:url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/genuinewood.jpg");
background-repeat: no-repeat;
background-size: 100% auto;}
.Resistech {
background-image:url("https://ywpadmin.com/imageserver/UserMedia/YWPGALLERY/Maibec/Resistech.jpg");
background-repeat: no-repeat;
background-size: 100% auto;}
.BG {
height: 333px;
width: 100%;
overflow-x: hidden;
float: left;
}
.MaibecCard {
padding:.5em;
float:right;
width:100%;
background-color: #fff;
}
.EVcolor {
margin:.125em;
height:4em;
width:14%;
display: inline-block;
cursor:pointer;
}
.EVcolor img {
max-width: 100%;
max-height: 100%;
display: block;
}
.EVcolor:hover, .EVcolor:active {filter: brightness(125%);}
.EVcolor:hover h3{color:#000;}
.EVcolor:active h3{color:#000;}
/* Maibec Solid Colors-Nautilia */
.UltraWhite {background-color:#f3f4f4;}
.Alabaster {background-color:#e1e4e3;}
.GrayBridge {background-color:#d1d5cb;}
.OldPort {background-color:#848887;}
.OysterGray {background-color:#ddddd8;}
.seacoast {background-color:#d9d2ca;}
.Granite {background-color:#b1b9b8;}
.Driftwood {background-color:#969a94;}
.GraySeal {background-color:#9ea1a0;}
.Offwhite {background-color:#f2f1e6;}
.SandDune {background-color:#e6e4e2;}
.CapeCodGray {background-color:#e5e0d9;}
.papyrus {background-color:#aa9f93;}
.Beech {background-color:#d1ccb8;}
.OceanGray {background-color:#a9a399;}
.Lamosite {background-color:#7d7975;}
.Gargoyle {background-color:#50504b;}
.Gray {background-color:#b6ab99;}
.pepperwood {background-color:#9d9484;}
.timber {background-color:#72695d;}
.DarkLeather {background-color:#685f56;}
/* Maibec Solid Colors-Balsamia */
.Iceberg {background-color:#d1d7da;}
.SilverBlue {background-color:#a4b0b6;}
.blueheron {background-color:#94b0be;}
.federalBlue {background-color:#697c86;}
.Citadelblue {background-color:#dfe8e9;}
.whitesage {background-color:#9fa9a8;}
.Vintageblue {background-color:#9db7b4;}
.grayblue {background-color:#898d8f;}
.colonialblue {background-color:#70767b;}
.barharborblue {background-color:#838e99;}
.mulberry {background-color:#979887;}
.spruceblue {background-color:#737b7a;}
.thundersky {background-color:#475b64;}
.navyblue {background-color:#0c3f57;}
.colonialgreen {background-color:#c0c2aa;}
.Sycamore {background-color:#aca388;}
.tundra {background-color:#847c65;}
.greentartan {background-color:#5d5f4f;}
.silvercloud {background-color:#d1cec1;}
.pistachioicecream {background-color:#c8c2a5;}
.foliagegreen {background-color:#958f7f;}
.autumnfog {background-color:#c8cdca;}
/* Maibec Solid Colors-Provincia */
.beachgrass {background-color:#baac90;}
.montauksand {background-color:#ccc5b3;}
.taupe {background-color:#9c8974;}
.brown {background-color:#927963;}
.seafrontbeige {background-color:#d9c1a8;}
.sandstonebeige {background-color:#bba78d;}
.beige {background-color:#d9c5a7;}
.lavaliere {background-color:#9d8261;}
.champagne {background-color:#eee2d5;}
.southampton {background-color:#dbcfb6;}
.shell {background-color:#d2c9b1;}
.mountdesertisland {background-color:#baab8e;}
.warmsand {background-color:#d3bb93;}
.platinum {background-color:#f0e2d1;}
.yellowcottage {background-color:#f5ead0;}
.linen {background-color:#fde2bb;}
.harvestyellow {background-color:#d7b786;}
.codyellow {background-color:#fffcdf;}
.honeygold {background-color:#fbe0af;}
.colonialyellow {background-color:#e4b97b;}
.porcelaine {background-color:#ddd5c1;}
/* Maibec Solid Colors-Terra */
.fossil {background-color:#948d7f;}
.hematite {background-color:#544f48;}
.mysteryblack {background-color:#141414;}
.clarissimo {background-color:#a69b90;}
.chanterelle {background-color:#827061;}
.umber {background-color:#7f6056;}
.buff {background-color:#ba9a7c;}
.tawnyowl {background-color:#9b7455;}
.toffee {background-color:#7f5f3e;}
.chocolate {background-color:#553f2d;}
.nordicbeige {background-color:#e2c7aa;}
.deer {background-color:#b89776;}
.goldenbrown {background-color:#b3895d;}
.cedarbark {background-color:#a17d57;}
.saddlery {background-color:#b98662;}
.russet {background-color:#91634f;}
.sequoia {background-color:#905749;}
.colonialorange {background-color:#a25641;}
.farmred {background-color:#7e4a47;}
.candyapple {background-color:#a03939;}
.napawine {background-color:#7b2727;}
.darkplum {background-color:#6b434f;}
/*Maibec URBAHN solid colors*/
.maibecUltraWhite {background-color:#f3f4f4;}
.OldPort {background-color:#848887;}
.SandDune {background-color:#e6e4e2;}
.oceanGray {background-color:#a9a399;}
.Lamosite {background-color:#7d7975;}
.Pepperwood {background-color:#9d9498;}
.Timber {background-color:#72695d;}
.DarkLeather {background-color:#685f56;}
.FoliageGreen {background-color:#958f7f;}
.Taupe {background-color:#9c8974;}
.SandstoneBeige {background-color:#bba78d;}
.Hematite {background-color:#544f48;}
.CedarBark {background-color:#a17d57;}
.Russet {background-color:#91634f;}
.Porcelaine {background-color:#ddd5c1;}
@media only screen and (max-width: 850px) {
.EVcolor {
width: 24%;
}
.BG {
width: 150%;
}
}
@media only screen and (max-width: 600px) {
.EVcolor {
width: 32%;
}
.BG {
height: 215px;
width: 180%;
}
._col_4, ._col_5, ._col_2, ._col_3 {
display: inline-block !important;
width: 50% !important;
}
}
/* JavaScript */
$(function() {
//color selector
$(".EVcolor").click(function(){
var color = $(this).attr("data-value");
$(".BG").css("background-color", color);
});
});