Pure CSS Flip Card on Hover

From David Walsh's tutorial on css flip cards

view instructions

1. Download the flipcard.css file and upload it to your group files.

2. When editing your page, make sure you click on the "source" button on the upper left of the CKEditor. Then include the following code at the top of your page

3. Cut and paste the following xmp onto your editor and make the necessary changes (see below).

Flip Card
  
<div class="card-container"> //Card wrapper

	<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> //Beginning of card
	  <div class="flipper">
	    <div class="front">
				<div class="img-container">
					<img src="/yourimage.jpg" alt="your alt text for image">
				</div>
	      <h3>Your Title</h3>
	      <p>Front Content</p>
	    </div>
	    <div class="back">
	      <div class="summary">
	        <p>Back content</p>
	      </div>
	      <a href="#" class="resource">View the Resource</a>
	    </div>
	  </div>
	</div> //End of card

</div> //End of card wrapper
  
  • Replace "yourimage.jpg" with the full file name with path of the picture that you want on the front of the card (e.g. “/groups/partnerprojectsupport/File:/uploads/ASM_logo.jpg”).  
    • Picture must first be uploaded to group files.
    • To find the full path, go to group files (click “Upload Images/Files” from “Pages”), click the downward arrow to the right of the file name, and copy the “path”.   
  • Replace your "alt text for image" with some simple text describing the image (e.g. DIG logo)
  • Replace "Title" with the heading that you would like to appear on the front of the card
  • Replace "Front Content" with the non-bold text that appears on the front of the card.
  • Replace "Back content" with the text that appears on the back of the card.
  • Replace "#" with the URL of the page you want to link to.
  • Replace "View the Resource" with the text that you want to appear on the button on the back.  

**Special note when adding multiple cards to your page**

<div class="card-container"> ..card code.. </div> is a container to wrap around all your cards. So when adding multiple cards, you do not need to cut and paste those 2 lines of code. You would only need to cut and paste the following after your first card:

	
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> //Beginning of card
	<div class="flipper">
		<div class="front">
			<div class="img-container">
				<img src="/yourimage.jpg" alt="your alt text for image">
			</div>
			<h3>Your Title</h3>
			<p>Front Content</p>
		</div>
		<div class="back">
			<div class="summary">
				<p>Back content</p>
			</div>
			<a href="#" class="resource">View the Resource</a>
		</div>
	</div>
</div> //End of card
	

So as an example of using 2 cards, the code would look like this (with both cards being wrapped within the card-container div):

	
<div class="card-container"> //Card wrapper

	<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> //Beginning of card
		<div class="flipper">
			<div class="front">
				<div class="img-container">
					<img src="/yourimage.jpg" alt="your alt text for image">
				</div>
				<h3>Your Title</h3>
				<p>Front Content</p>
			</div>
			<div class="back">
				<div class="summary">
					<p>Back content</p>
				</div>
				<a href="#" class="resource">View the Resource</a>
			</div>
		</div>
	</div> //End of card

	<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> //Beginning of card
		<div class="flipper">
			<div class="front">
				<div class="img-container">
					<img src="/yourimage.jpg" alt="your alt text for image">
				</div>
				<h3>Your Title</h3>
				<p>Front Content</p>
			</div>
			<div class="back">
				<div class="summary">
					<p>Back content</p>
				</div>
				<a href="#" class="resource">View the Resource</a>
			</div>
		</div>
	</div> //End of card

</div> //End of card wrapper
	
image placeholder

Photo by Annie Spratt on Unsplash. Photo by Annie Spratt on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

image placeholder

Photo by Sidney Chiang on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

image placeholder

Photo by Noah Silliman on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Simple Card With Hover Effect

view instructions

1. Download the simplecard.css file and upload it to your group files.

2. When editing your page, make sure you click on the "source" button. Then include the following code at the top of your page

3. Cut and paste the following code onto your editor and make the necessary changes.

Simple Card
    
<div class="card-container"> //Card wrapper

  <div class="simple-card"> //Beginning of card
    <a href="#">
			<div class="img-container">
				<img src="/yourimage.jpg" alt="image placeholder">
			</div>
		</a>
    <a href="#"><h3 class="resource-link">Your Title</h3></a>
    <p>Your Content</p>
  </div> //End of card

</div> //End of card wrapper
    
  
  • Replace "yourimage.jpg" with the full file name with path of the image you wanted to be displayed (e.g. “/groups/partnerprojectsupport/File:/uploads/ASM_logo.jpg”).
    • Picture must first be uploaded to group files.
    • To find the full path, go to group files (click “Upload Images/Files” from “Pages”), click the downward arrow to the right of the file name, and copy the “path”. 
  • Replace both "#"s with the URL of the page you want to link to.  
    • The # in the 3rd line is the link when you click on the image.  
    • The # in the 4th line is the link when you click on the title.  
    • You can make them the same or different.
  • Replace "Your Title" with the heading you wanted to appear.
  • Replace "Your Content" with the non-bold text you wanted to appear.

**Special note when adding multiple cards to your page**

<div class="card-container"> ..card code.. </div> is a container to wrap around all your cards. So when adding multiple cards, you do not need to cut and paste those 2 lines of code. You would only need to cut and paste the following after your first card:

	
<div class="simple-card"> //Beginning of card
	<a href="#">
		<div class="img-container">
			<img src="/yourimage.jpg" alt="image placeholder">
		</div>
	</a>
	<a href="#"><h3 class="resource-link">Your Title</h3></a>
	<p>Your Content</p>
</div> //End of card
	

So as an example of using 2 cards, the code would look like this (with both cards being wrapped within the card-container div):

    
<div class="card-container"> //Card wrapper

  <div class="simple-card"> //Beginning of card
    <a href="#">
			<div class="img-container">
				<img src="/yourimage.jpg" alt="image placeholder">
			</div>
		</a>
    <a href="#"><h3 class="resource-link">Your Title</h3></a>
    <p>Your Content</p>
  </div> //End of card

	<div class="simple-card"> //Beginning of card
    <a href="#">
			<div class="img-container">
				<img src="/yourimage.jpg" alt="image placeholder">
			</div>
		</a>
    <a href="#"><h3 class="resource-link">Your Title</h3></a>
    <p>Your Content</p>
  </div> //End of card

</div> //End of card wrapper
    
  
image placeholder

Photo by Annie Spratt on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

image placeholder

Photo by Sidney Chiang on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

image placeholder

Photo by Noah Silliman on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

Horizontal Card with Hover Effect

view instructions

1. Download the horizontalcard.css file and upload it to your group files.

2. When editing your page, make sure you click on the "source" button. Then include the following code at the top of your page

3. Cut and paste the following code onto your editor and make the necessary changes.

Horizontal Card with Hover Effect
    
<div class="card-container"> //Card wrapper

  <div class="horizontal-card"> //Beginning of card
    <a href="#">
			<div class="img-container">
				<img class="card-img" src="/yourimage.jpg" alt="image placeholder">
			</div>
		</a>
    <div class="card-info">
      <a href="#"><h3 class="resource-link">Your Title</h3></a>
      <p>Your Content</p>
    </div>
  </div> //End of card

</div> //End of card wrapper
    
  

**Special note when adding multiple cards to your page**

<div class="card-container"> ..card code.. </div> is a container to wrap around all your cards. So when adding multiple cards, you do not need to cut and paste those 2 lines of code. You would only need to cut and paste the following after your first card:

    
<div class="horizontal-card"> //Beginning of card
  <a href="#">
		<div class="img-container">
			<img class="card-img" src="/yourimage.jpg" alt="image placeholder">
		</div>
	</a>
  <div class="card-info">
    <a href="#"><h3 class="resource-link">Your Title</h3></a>
    <p>Your Content</p>
  </div>
</div> // End of card
    
  

So as an example of using 2 cards, the code would look like this (with both cards being wrapped within the card-container div):

    
<div class="card-container"> //Card wrapper

  <div class="horizontal-card"> //Beginning of card
    <a href="#">
			<div class="img-container">
				<img class="card-img" src="/yourimage.jpg" alt="image placeholder">
			</div>
		</a>
    <div class="card-info">
      <a href="#"><h3 class="resource-link">Your Title</h3></a>
      <p>Your Content</p>
    </div>
  </div> //End of card

	<div class="horizontal-card"> //Beginning of card
    <a href="#">
			<div class="img-container">
				<img class="card-img" src="/yourimage.jpg" alt="image placeholder">
			</div>
		</a>
    <div class="card-info">
      <a href="#"><h3 class="resource-link">Your Title</h3></a>
      <p>Your Content</p>
    </div>
  </div> //End of card

</div> //End of card wrapper
    
  
image placeholder

Photo by Annie Spratt on Unsplash, Photo by Annie Spratt on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

image placeholder

Photo by Sidney Chiang on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.

image placeholder

Photo by Noah Silliman on Unsplash

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.