CSS Transform styling won't work on the card I am using

[chrissaibiernas]

How do you make the card to transform back to the front card when you click on the return arrow left icon at the back of this card both on mobile and desktop device. https://www.besocialscene.com/new-sept-homepage?hs_preview=YhTtsyAc-13258353405. I tried using the ff breakpoints but it won't transform.

I still want the hover to be applied in desktop but also want to arrow left icon to work and not just hover feature. On mobile you can click anywhere of the front card to apply the transform styling and then the arrow left for return function.

@media (min-width:1025px) {
.more {
display: none;
}
.card:hover .content {
transform: rotateY(180deg);
}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px) {
.more {
display: none;
}
.more:checked ~ .content {
transform: rotateY(180deg) !important;
}
.card:hover .content {
transform: rotateY(180deg) !important;
}
}

[Kevin-C]

Hey @chrissaibiernas 

Looks like you've got a lot going on here.

To start you've got all the correct pieces they're just arranged a little oddly.

On lines 1066 and 1163 you've got the same CSS for the .card hover

With the media query you have this operates from 1025px and up.

This CSS without the media query operate at 0px and up. <-- The Issue

This is causing the mobile browsers to catch the click, and treat it like a hover on the .card rather than treating it as a click on the .button.

Remove this block of CSS and you should be in business!

With said :hover removed (and the checkboxes shown for testing) the checkbox logic  opperates correctly. Awesome! See below:

[Kevin-C]

On a related but separate note:

The "device-width" media feature has been deprecated for the easier to use "min-/max-width! Less CSS to write/maintain! See here

[chrissa0000]

Hi @Kevin-C  thank you for the reply. I removed the CSS block you suggested but same issue still occurs, the first query was for 1025 and up and the second was for 320 to 1024 device width. This is the whole CSS structure

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/****************************************/
/* HubSpot Style Boilerplate            */
/****************************************/

/* These includes are optional, but helpful. */
{% include "hubspot/styles/responsive/modules.css" %}
{% include "hubspot/styles/patches/recommended.css" %}


/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* 
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
}
 */
.wrappers {
  display: flex;
 justify-content: center;
  width:100% !important;
  margin: 0 auto !important;
  flex-wrap: wrap;
  padding-bottom:20px;
  max-height: 100%;
  
}

@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
  .card:nth-child(3n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* New syntax */
}  
    
    .wrappers .break {
  flex-basis: auto !important;
  height: 0;
}
 
    .main-event-space {
    margin-top:15px;
    }

}
   .no-card:hover  .content {
  transform: none !important;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
    
.row{
  display:contents !important;
  }
  
}
    
.card {
  width: 290px !important;
  height: 210px !important;
  margin: 10px !important;
  max-height: 100%;
  /*perspective: 1500px;*/
}

.card:nth-child(4n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* New syntax */
}

.wrappers .break {
  flex-basis: 100%;
  height: 0;
  
}

.card .content {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
   
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 6px;
   max-height: 100% !important;
}
.front .inner,
.back .inner {
  height: 100%;
  display: grid;
  padding: 1.3em;
  transform: translateZ(80px) scale(0.94);
}


.back .inner {
padding: 0.20em !important;
background-color:#fff;   

}


.front {
  background-color: #fff;
  background-size: cover;
  background-position: center center;
}
.front:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  backface-visibility: hidden;
/*   background: linear-gradient(180deg, rgba(161, 232, 185, .8), rgba(105,105,105, 0.7)); */
    background: linear-gradient(180deg, rgba(161, 232, 185, .6), rgba(105,105,105, 0.8));
}
.front .inner {
  grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
  justify-items: center;
}
.front h2 {
  grid-row: 2;
  margin-bottom: 0.3em;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #000 !important;
  font-weight:450;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  text-align:center;
  font-size:23px !important;     
}
.front .rating {
  grid-row: 3;
  color: #ffe234;
  font-size: 10px;
  display: flex;
  flex-flow: row nowrap;
}
.front .rating i {
  margin: 5px 1px;
}

.back {
  transform: rotateY(180deg);
  background-color: #fff;
  border: 2px solid #a1e8b9;
  
}
.back .inner {
  grid-template-rows: 1fr 1fr 1fr 1fr 14fr 1fr 1fr;
  grid-template-columns: repeat(4, auto);
  grid-column-gap: 0.8em;
  justify-items: inherit;

}
.back .info {
  position: relative;
  display: flex;
  align-items: center;
  color: #696969;
  grid-row: 3;
}
.back .info:not(:first-of-type):before {
  /*content: '';*/
  position: absolute;
  left: -0.9em;
  height: 18px;
  width: 1px;
  background-color: #ccc;
}
.back .info span {
  font-size: 0.65em;
  font-weight: 700;
}
.back .info i {
  font-size: 1.2em;
  
}
.back .info i:before {
  background: linear-gradient(40deg, #355cc9, #438af3);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.back .info .icon {
  margin-left: 0.3em;
}
.back .info .icon span {
  display: block;
  margin-top: -0.25em;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
}
.back .description {
  grid-row: 5;
  grid-column: 1/-1;
  border-radius: 5px;
  font-weight: 600;
  line-height: 1em;
  overflow-y: scroll;
  overflow-x:hidden;
  
  padding-right: 10px;
  position:relative;    
}

.back .allevent{
font-size: 0.4em;    
}

.back .description ul {
list-style:   none;
padding:0;
margin: 0 auto;  
text-align:left; 
position: absolute;
}

.back .description li, a {
padding:6px;  
text-decoration: none;
color: #000;
font-size:12px; 
text-align:left;

}

.back .description span {
margin-right:10px;
}

.back .description p{
padding:10px 5px;
}


.draw-border {
  box-shadow: inset 0 0 0 2px #a1e8b9;
  transition: color 0.25s 0.0833333333s;
  position: relative;
  width:100%;  
}
.draw-border::before, .draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
}
.draw-border::before {
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.draw-border::after {
  border-top-width: 2px;
  border-right-width: 2px;
}
.draw-border:hover {
  color: #696969;

}
.draw-border:hover::before, .draw-border:hover::after {
  border-color:#696969;
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}
.draw-border:hover::before {
  transition-delay: 0s, 0s, 0.25s;
}
.draw-border:hover::after {
  transition-delay: 0s, 0.25s, 0s;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.05rem;
  margin:5px;
}
.btn:focus {
  outline: 2px dotted #55d7dc;
}


.back .location,
.back .price {
  font-weight: 600;
  color: #696969;
  grid-row: 1;
  font-size: 0.86em;
}
.back .location {
  grid-column: 1/3;
  justify-self: left;
}
.back .price {
  grid-column: 3/-1;
  justify-self: right;
}
.back .button {
  grid-column: 1/-1;
  justify-self: center;
}

.allevents-button {
color: #fff !important;
  text-decoration:none !important;
  font-size:  1em !important;

}

.allevents-button:hover {
   
  color: #696969 !important;
  
}

.card .button  {
  grid-row: -1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  padding: 0 1.5em;
  height: 3em;
  line-height: 2.9em;
  min-width: 3em;
  background-color: transparent;
  border: solid 2px #fff;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  left: 50%;
  backface-visibility: hidden;
  transition: 0.3s ease-in-out;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.card .button:hover {
  background-color: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  text-shadow: none;
  color: #696969;
}
.card .button.return {
  line-height: 1.7em;
  color: #696969;
  border-color: #696969;
  text-shadow: none;
  height: 2em !important  ;  
}

.button.return:hover {
  background-color: #696969;
  color: #fff;
  box-shadow: none;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #707070;
}

::-webkit-scrollbar-thumb:hover {
  background: #355cc9;
}
::-webkit-overflow-scrolling:touch; {
background:#707070;
width: 5px;
}


/* Desktop Device*/
@media (min-width:1025px)  {
    
.more {
  display: none;
}
/* .more:hover ~ .content {
  transform: rotateY(180deg);
} */
/* .more:checked ~ .content, */

 .card:hover  .content {
  transform: rotateY(180deg);
}

  

}





/* Mobile and Table Devices */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px) {


  .back .description ul .draw-border {
  width: calc(100% - 5px);
}
  
  .back {
    transform: rotateY(180deg);
    background-color: #fff;
    border: 5px solid #a1e8b9;
}
  .wrappers .row {
  display:contents;
  }
  
  .back .allevent li{
font-size: 0.4em;    
}

 .card {
  width: 320px !important;
  height: 240px !important;
  margin: .4em !important;
   max-height: 100%;
  
}


.front h2 {
  font-size:1em;
}

.card .button {
font-size:  1em;
  margin: 0 auto !important;

}

.back .description { 
  font-size: 16px; 
}

.back .description li , a{ 
  margin:0 auto;
  font-weight: 400; 
  padding: 6px; 
 
}

.back .info span {
  font-size:.8em;
  font-weight: 700;
}

.back .location,
.back .price {
  font-size: .8em;
}


::-webkit-scrollbar {
  width: 10px;
}

.draw-border {
  width:99%;  
}

.draw-border:hover {
  color: #696969;

}
  
.more {
  display: none;
}
.more:checked ~ .content {
  transform: rotateY(180deg) !important;
}
  
.card:hover .content {
  transform: rotateY(180deg) !important;
}
  



/* Styles */
}

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

[Kevin-C]

Ahhh after rereading the question I obviously answered the wrong question lol

What about using JS to detect hover?

Maybe something like:

$('.card').mouseover(function() {
  var checkbox = $(this).find('input[type="checkbox"]');
  if( checkbox.prop("checked") != true) {
    checkbox.prop('checked', true);
  }
});

$('.button.return').on('click', function() {
  var checkbox = $(this).parent().parent().parent().parent().find('input[type="checkbox"]');
  if (checkbox.prop("checked")!=false) {
    checkbox.prop("checked", false);
  }
);

Disclaimer: I didn't get to test this jQuery script 😞

[chrissa0000]

@Kevin-C I added this, but still has same issue. Appreciate your help!

[chrissa0000]

@Kevin-C  So I tried to add this code. The button seems working now  as well as the hover. The issue is just the front card is messed up and disappeared when you click on the teturn button

.card:hover .inner {
transform: rotateY(180deg) !important;
}