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).
- 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**
//Beginning of card//End of cardYour Title
Front Content
View the ResourceBack content
So as an example of using 2 cards, the code would look like this (with both cards being wrapped within the card-container div):
//Card wrapper//End of card wrapper//Beginning of card//End of cardYour Title
Front Content
View the ResourceBack content
//Beginning of card//End of cardYour Title
Front Content
View the ResourceBack content
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.
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.
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.
- 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**
//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):
//Card wrapper //End of card //End of card//End of card wrapper
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.
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.
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.
**Special note when adding multiple cards to your page**
//Beginning of card// End of cardYour Title
Your Content
So as an example of using 2 cards, the code would look like this (with both cards being wrapped within the card-container div):
//Card wrapper//End of card wrapper//Beginning of card//End of cardYour Title
Your Content
//Beginning of card//End of cardYour Title
Your Content
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.
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.
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.