0

I have a section in a website with a flip-hover effect. The client has asked if the flip can be restricted to one automatic flip from front-to-back and then back-to-front once the cursor is removed and any future flips to only happen by click. Basically they don't want the action to keep happening automatically, just on one occasion per site visit. I think they're thinking is it might get a bit annoying if it keeps happening when a user is navigating the site. Is this even possible and if so, how do I do this?

Here's the code as it stands - 

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800);
body {
  font-family: 'Montserrat', sans-serif !important;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Parallax flipping cards - Codepen */


/* *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} */

h1 {
  font-size: 3rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  /* width: 90%; */
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-sm-3 {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  float: left;
  margin: 0 20px 0 0;
  /* padding: 10px; */
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  /* size of box */
  min-height: 300px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
}

.back {
  /* background: #fff; 
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%); */
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 300px;
  height: 300px;
  content: '';
  display: block;
  /* background shade - was .6 originally */
  opacity: .;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 0px solid;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  font-size 1rem;
  text-align: left;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /*   -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container:hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.container:hover .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.front .inner p {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  position: absolute;
  background: #000;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: ;
}
<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>

    <div class="cols">
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Identity</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Graphic Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Editorial Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Guidelines</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Print Management</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Signage</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Creative Direction</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Illustration & Animation</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Mike.Whitehead
  • 798
  • 18
  • 52
  • Create class some class and move animation to it. remove that class by JavaScript and set some class to check if mouserover is happen or not – Mahesh Odedra Sep 25 '17 at 10:40
  • 2
    Control the animation by JS. Remove the hover attr once done and bind a click event to it. – Aslam Sep 25 '17 at 10:43

3 Answers3

1

This should help you get started.

First works on hover. After that on click :) 

var containers = document.querySelectorAll('.container');

containers.forEach(container => {

  container.addEventListener('mouseenter', function() {
    if (!container.classList.contains('flipcomplete')) {
      container.classList.add('flipped');
    }

  });
  container.addEventListener('mouseleave', function() {
    if (!container.classList.contains('flipcomplete')) {
      container.classList.remove('flipped');
      container.classList.add('flipcomplete');

    }
  });
  

container.addEventListener('click', function() {
    container.classList.toggle('flipped');

  });

});
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800);
body {
  font-family: 'Montserrat', sans-serif !important;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Parallax flipping cards - Codepen */


/* *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} */

h1 {
  font-size: 3rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  /* width: 90%; */
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-sm-3 {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  float: left;
  margin: 0 20px 0 0;
  /* padding: 10px; */
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  /* size of box */
  min-height: 300px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
}

.back {
  /* background: #fff; 
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%); */
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 300px;
  height: 300px;
  content: '';
  display: block;
  /* background shade - was .6 originally */
  opacity: .;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 0px solid;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  font-size 1rem;
  text-align: left;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /*   -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container.flipped .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.container.flipped .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.front .inner p {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  position: absolute;
  background: #000;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: ;
}
<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>

    <div class="cols">
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Identity</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Graphic Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Editorial Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Guidelines</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Print Management</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Signage</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Creative Direction</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Illustration & Animation</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Aslam
  • 9,204
  • 4
  • 35
  • 51
  • Hi buddy, thanks so much for the answer here yesterday. Funny thing, though, when I try and implement into my text editor files the javascript doesn't work. I've done another Q on it here - https://stackoverflow.com/q/46406549/3521315 - can you spot what might be stopping it? – Mike.Whitehead Sep 26 '17 at 12:39
0

You could possibly get some information from : Run CSS3 animation only once (at page loading)

I think it's not possible using only CSS. You could add some javacript to toggle an attribute once it's hovered and use it in your CSS a single time.

Saucistophe
  • 314
  • 2
  • 10
0

If you have no problem in using jQuery just use the library "jQuery Flip".

rohit agrawal
  • 32
  • 4