cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="en">
    <head>
      
      <!--  Meta  -->
      <meta charset="UTF-8" />
      <title>CSS Grid Interactive Recipes</title>
      
      <!--  Styles  -->
      <link rel="stylesheet" href="styles/index.processed.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
    </head>
    <body>
      <!-- Recipes were pulled at random from AllRecipes -->
        <ul class="grid">
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/3442434.jpg');">
                <div class="grid-title">
                    <p>Mediterranean Chicken</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Mediterranean Chicken</h1>
                    <p>By Robyn Webb</p>
                    <blockquote>Sauteed chicken simmered in a sauce of tomatoes, olives, white wine, garlic, and herbs. This recipe is from The WEBB Cooks, articles and recipes by Robyn Webb, courtesy of the American Diabetes Association. Preparation time: 20 minutes.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>2 teaspoons olive oil</li>
                        <li>2 tablespoons white wine</li>
                        <li>6 skinless, boneless chicken breast halves</li>
                        <li>3 cloves garlic, minced</li>
                        <li>1/2 cup diced onion</li>
                        <li>3 cups tomatoes, chopped</li>
                        <li>1/2 cup white wine</li>
                        <li>2 teaspoons chopped fresh thyme</li>
                        <li>1 tablespoon chopped fresh basil</li>
                        <li>1/2 cup kalamata olives</li>
                        <li>1/4 cup chopped fresh parsley</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Heat the oil and 2 tablespoons white wine in a large skillet over medium heat. Add chicken and saute about 4 to 6 minutes each side, until golden. Remove chicken from skillet and set aside.</li>                        
                        <li>Saute garlic in pan drippings for 30 seconds, then add onion and saute for 3 minutes. Add tomatoes and bring to a boil. Lower heat, add 1/2 cup white wine and simmer for 10 minutes. Add thyme and basil and simmer for 5 more minutes.</li>
                        <li>Return chicken to skillet and cover. Cook over low heat until the chicken is cooked through and no longer pink inside. Add olives and parsley to the skillet and cook for 1 minute. Season with salt and pepper to taste and serve.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/277070.jpg');">
                <div class="grid-title">
                    <p>Apple Crisp II</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Apple Crisp II</h1>
                    <p>By Diane Kester</p>
                    <blockquote>A simple dessert that's great served with ice cream.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>10 cups all-purpose apples, peeled, cored and sliced</li>
                        <li>1 cup white sugar</li>
                        <li>1 tablespoon all-purpose flour</li>
                        <li>1 teaspoon ground cinnamon</li>
                        <li>1/2 cup water</li>
                        <li>1 cup quick-cooking oats</li>
                        <li>1 cup all-purpose flour</li>
                        <li>1 cup packed brown sugar</li>
                        <li>1/4 teaspoon baking powder</li>
                        <li>1/4 teaspoon baking soda</li>
                        <li>1/2 cup butter, melted</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Preheat oven to 350 degrees F (175 degree C).</li>                    
                        <li>Place the sliced apples in a 9x13 inch pan. Mix the white sugar, 1 tablespoon flour and ground cinnamon together, and sprinkle over apples. Pour water evenly over all.</li>
                        <li>Combine the oats, 1 cup flour, brown sugar, baking powder, baking soda and melted butter together. Crumble evenly over the apple mixture.</li>
                        <li>Bake at 350 degrees F (175 degrees C) for about 45 minutes.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/820420.jpg');">
                <div class="grid-title">
                    <p>Oatmeal Craisin Cookies</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Oatmeal Craisin Cookies</h1>
                    <p>By Liane McKellar</p>
                    <blockquote>Oatmeal cookies with raisins and craisins.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1 cup butter, softened</li>
                        <li>1 cup packed brown sugar</li>
                        <li>1 cup white sugar</li>
                        <li>2 eggs</li>
                        <li>1 teaspoon vanilla extract</li>
                        <li>2 cups quick cooking oats</li>
                        <li>2 cups all-purpose flour</li>
                        <li>1 teaspoon baking soda</li>
                        <li>1 teaspoon baking powder</li>
                        <li>1 teaspoon salt</li>
                        <li>1 cup raisins</li>
                        <li>1 cup dried cranberries</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Beat butter, sugars, eggs and vanilla for 5 minutes. In another bowl, combine oats, flour, baking soda, baking powder, and salt. Add to butter mixture 1 cup at a time.</li>
                        <li>Mix in raisins and craisins.</li>
                        <li>Drop by spoonfuls onto greased cookie sheets and bake for 12-14 minutes at 350 degrees F (175 degrees C). These freeze very well. Enjoy!!</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/686625.jpg');">
                <div class="grid-title">
                    <p>BBQ Glazed Homemade Meatballs</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>BBQ Glazed Homemade Meatballs</h1>
                    <p>By TERESA64151</p>
                    <blockquote>Homemade meatballs made from beef, onion, oatmeal, evaporated milk, and egg, and glazed with a homemade barbecue sauce made with ketchup, brown sugar, garlic, and liquid smoke. Best meatballs I ever tasted. Everyone asks for this recipe.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1 1/2 pounds ground beef</li>
                        <li>1 egg, lightly beaten</li>
                        <li>1 cup quick cooking oats</li>
                        <li>6 1/2 ounces evaporated milk</li>
                        <li>1 teaspoon salt</li>
                        <li>1/4 teaspoon pepper</li>
                        <li>1/2 teaspoon garlic powder</li>
                        <li>1 tablespoon chili powder</li>
                        <li>1/2 cup chopped onion</li>
                        <li>1 cup ketchup</li>
                        <li>1/4 teaspoon minced garlic</li>
                        <li>1 cup brown sugar</li>
                        <li>1/4 cup chopped onion</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Preheat oven to 350 degrees F (175 degrees C). Lightly grease a medium baking dish.</li>
                        <li>In a bowl, mix beef, egg, oats, evaporated milk, salt, pepper, garlic powder, chili powder, and 1/2 cup onion. Form into 1 1/2 inch balls and arrange in a single layer in the baking dish.</li>
                        <li>In a separate bowl, mix ketchup, garlic, sugar, 1/4 cup onion, and liquid smoke. Pour evenly over the meatballs.</li>
                        <li>Bake uncovered 1 hour in the preheated oven, until the minimum internal temperature of a meatball reaches 160 degrees F (72 degrees C).</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/4460405.jpg');">
                <div class="grid-title">
                    <p>Jalapeno Popper Quesadillas</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Jalapeno Popper Quesadillas</h1>
                    <p>By laurieish</p>
                    <blockquote>This is a great alternative to deep-fried jalapeno poppers that's much easier to make and healthier too. Slice into small wedges to use as an appetizer, or enjoy as light meatless Monday dinner.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>6 jalapeno peppers - stemmed, seeded, and halved lengthwise</li>
                        <li>1 tablespoon butter, softened</li>
                        <li>2 (10 inch) flour tortillas</li>
                        <li>2 tablespoons cream cheese, softened</li>
                        <li>1/2 cup shredded Mexican cheese blend</li>
                        <li>3 tortilla chips, crushed, or more to taste (optional)</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Set oven rack about 6 inches from the heat source and preheat the oven's broiler. Line a baking sheet with aluminum foil.</li>                        
                        <li>Arrange jalapeno peppers, cut-side down, on the prepared baking sheet.</li>
                        <li>Broil jalapeno peppers in the preheated oven until skins are bubbling and blackened, 10 to 15 minutes. Immediately place peppers in a resealable plastic bag; seal. Allow peppers to steam in bag to help loosen skins, about 20 minutes. Carefully open bag, pull skins off peppers, and chop peppers.</li>
                        <li>Spread half the butter onto 1 side of each tortilla. Spread half the cream cheese onto the other side of each tortilla. Sprinkle half the jalapeno peppers, half the Mexican cheese blend, and half the tortilla chips over the cream cheese-side of each tortilla. Fold each tortilla in half over the fillings with butter-side on the outside.</li>
                        <li>Heat a skillet over medium-low heat; cook 1 quesadilla in the hot skillet until golden brown, 2 to 3 minutes per side. Repeat with second quesadilla.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/744202.jpg');">
                <div class="grid-title">
                    <p>Pumpkin Whoopie Pies</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Pumpkin Whoopie Pies</h1>
                    <p>By Vonieta Stogner</p>
                    <blockquote>A delicious pumpkin cookie that can be eaten single or filled with whoopie pie filling to make it even better.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>2 cups packed brown sugar</li>
                        <li>1 cup vegetable oil</li>
                        <li>1 1/2 cups solid pack pumpkin puree</li>
                        <li>2 eggs</li>
                        <li>3 cups all-purpose flour</li>
                        <li>1 teaspoon salt</li>
                        <li>1 teaspoon baking powder</li>
                        <li>1 teaspoon baking soda</li>
                        <li>1 teaspoon vanilla extract</li>
                        <li>1 1/2 tablespoons ground cinnamon</li>
                        <li>1/2 tablespoon ground ginger</li>
                        <li>1/2 tablespoon ground cloves</li>
                        <li>1 egg white</li>
                        <li>2 tablespoons milk</li>
                        <li>1 teaspoon vanilla extract</li>
                        <li>2 cups confectioners' sugar</li>
                        <li>3/4 cup shortening</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Preheat oven to 350 degrees F (175 degrees C). Lightly grease baking sheets.</li>
                        <li>Combine the oil and brown sugar. Mix in the pumpkin and eggs, beating well. Add the flour, salt, baking powder, baking soda, 1 teaspoon vanilla, cinnamon, ginger and cloves. Mix well.</li>
                        <li>Drop dough by heaping teaspoons onto the prepared baking sheets. Bake at 350 degrees F (175 degrees C) for 10 to 12 minutes. Let cookies cool then make sandwiches from two cookies filled with Whoopie Pie Filling.</li>
                        <li>To Make Whoopie Pie Filling: Beat egg white and mix with the milk, 1 teaspoon vanilla and 1 cup of the confectioners' sugar. Mix well then beat in the shortening and the remaining cup of confectioners' sugar. Beat until light and fluffy.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/4549247.jpg');">
                <div class="grid-title">
                    <p>Asian Lettuce Wraps</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Asian Lettuce Wraps</h1>
                    <p>By Rachel Castro</p>
                    <blockquote>Delicious and bursting with flavor, Asian lettuce wraps are a great idea for entertaining or a family style meal. Each person can build their own fresh, delicious wrap. Just be sure to have plates or napkins available since the mixture can sometimes drip a little. To serve, allow each person to spoon a portion of the meat into a lettuce leaf. Wrap the lettuce around the meat like a burrito and enjoy!</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>16 Boston Bibb or butter lettuce leaves</li>
                        <li>1 pound lean ground beef</li>
                        <li>1 tablespoon cooking oil</li>
                        <li>1 large onion, chopped</li>
                        <li>1/4 cup hoisin sauce</li>
                        <li>2 cloves fresh garlic, minced</li>
                        <li>1 tablespoon soy sauce</li>
                        <li>1 tablespoon rice wine vinegar</li>
                        <li>2 teaspoons minced pickled ginger</li>
                        <li>1 dash Asian chile pepper sauce, or to taste (optional)</li>
                        <li>1 (8 ounce) can water chestnuts, drained and finely chopped</li>
                        <li>1 bunch green onions, chopped</li>
                        <li>2 teaspoons Asian (dark) sesame oil</li>
                                
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Rinse whole lettuce leaves and pat dry, being careful not tear them. Set aside.</li>
                        <li>Heat a large skillet over medium-high heat. Cook and stir beef and cooking oil in the hot skillet until browned and crumbly, 5 to 7 minutes. Drain and discard grease; transfer beef to a bowl. Cook and stir onion in the same skillet used for beef until slightly tender, 5 to 10 minutes. Stir hoisin sauce, garlic, soy sauce, vinegar, ginger, and chile pepper sauce into onions. Add water chestnuts, green onions, sesame oil, and cooked beef; cook and stir until the onions just begin to wilt, about 2 minutes.</li>
                        <li>Arrange lettuce leaves around the outer edge of a large serving platter and pile meat mixture in the center.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/1394851.jpg');">
                <div class="grid-title">
                    <p>The Best Lemon Bars</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>The Best Lemon Bars</h1>
                    <p>By Patty Schenck</p>
                    <blockquote>Tart, rich and perfection, all rolled into one! Wow your friends with this simple recipe. Hint: No Substitutions!</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1 cup butter, softened</li>
                        <li>1/2 cup white sugar</li>
                        <li>2 cups all-purpose flour</li>
                        <li>4 eggs 1 1/2 cups white sugar</li>
                        <li>1/4 cup all-purpose flour</li>
                        <li>2 lemons, juiced</li>                                
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Preheat oven to 350 degrees F (175 degrees C).</li>
                        <li>In a medium bowl, blend together softened butter, 2 cups flour and 1/2 cup sugar. Press into the bottom of an ungreased 9x13 inch pan.</li>
                        <li>Bake for 15 to 20 minutes in the preheated oven, or until firm and golden. In another bowl, whisk together the remaining 1 1/2 cups sugar and 1/4 cup flour. Whisk in the eggs and lemon juice. Pour over the baked crust.</li>
                        <li>Bake for an additional 20 minutes in the preheated oven. The bars will firm up as they cool. For a festive tray, make another pan using limes instead of lemons and adding a drop of green food coloring to give a very pale green. After both pans have cooled, cut into uniform 2 inch squares and arrange in a checker board fashion.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/250x250/873534.jpg');">
                <div class="grid-title">
                    <p>Chinese Pork Dumplings</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Chinese Pork Dumplings</h1>
                    <p>By Allrecipes</p>
                    <blockquote>In Seattle's International District, Liana Cafe House sells traditional Chinese pork dumplings from a tiny takeout shop. See how to make them at home.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1/2 cup soy sauce</li>
                        <li>1 tablespoon seasoned rice vinegar</li>
                        <li>1 tablespoon finely chopped Chinese chives</li>
                        <li>1 tablespoon sesame seeds</li>
                        <li>1 teaspoon chile-garlic sauce (such as Sriracha®)</li>
                        <li>1 pound ground pork</li>
                        <li>3 cloves garlic, minced 1 egg, beaten</li>
                        <li>2 tablespoons finely chopped Chinese chives</li>
                        <li>2 tablespoons soy sauce</li>
                        <li>1 1/2 tablespoons sesame oil</li>
                        <li>1 tablespoon minced fresh ginger</li>
                        <li>50 dumpling wrappers</li>
                        <li>1 cup vegetable oil for frying 1 quart water, or more as needed</li>       
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Combine 1/2 cup soy sauce, rice vinegar, 1 tablespoon chives, sesame seeds, and chile sauce in a small bowl. Set aside.</li>
                        <li>Mix pork, garlic, egg, 2 tablespoons chives, soy sauce, sesame oil, and ginger in a large bowl until thoroughly combined. Place a dumpling wrapper on a lightly floured work surface and spoon about 1 tablespoon of the filling in the middle. Wet the edge with a little water and crimp together forming small pleats to seal the dumpling. Repeat with remaining dumpling wrappers and filling.</li>
                        <li>Heat 1 to 2 tablespoons vegetable oil in a large skillet over medium-high heat. Place 8 to 10 dumplings in the pan and cook until browned, about 2 minutes per side. Pour in 1 cup of water, cover and cook until the dumplings are tender and the pork is cooked through, about 5 minutes. Repeat for remaining dumplings. Serve with soy sauce mixture for dipping.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/962656.jpg');">
                <div class="grid-title">
                    <p>Delicious Ham and Potato Soup</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Delicious Ham and Potato Soup</h1>
                    <p>By ELLIE11</p>
                    <blockquote>This is a delicious recipe for ham and potato soup that a friend gave to me. It is very easy and the great thing about it is that you can add additional ingredients, more ham, potatoes, etc and it still turns out great.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>3 1/2 cups peeled and diced potatoes</li>
                        <li>1/3 cup diced celery</li>
                        <li>1/3 cup finely chopped onion 3/4 cup diced cooked ham</li>
                        <li>3 1/4 cups water</li>
                        <li>2 tablespoons chicken bouillon granules</li>
                        <li>1/2 teaspoon salt, or to taste</li>
                        <li>1 teaspoon ground white or black pepper, or to taste</li>
                        <li>5 tablespoons butter</li>
                        <li>5 tablespoons all-purpose flour</li>            
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Combine the potatoes, celery, onion, ham and water in a stockpot. Bring to a boil, then cook over medium heat until potatoes are tender, about 10 to 15 minutes. Stir in the chicken bouillon, salt and pepper.</li>
                        <li>In a separate saucepan, melt butter over medium-low heat. Whisk in flour with a fork, and cook, stirring constantly until thick, about 1 minute. Slowly stir in milk as not to allow lumps to form until all of the milk has been added. Continue stirring over medium-low heat until thick, 4 to 5 minutes.</li>
                        <li>Stir the milk mixture into the stockpot, and cook soup until heated through. Serve immediately.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/865377.jpg');">
                <div class="grid-title">
                    <p>Chunky Cheesecake Brownies</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Chunky Cheesecake Brownies</h1>
                    <p>By bakergirl</p>
                    <blockquote>Wow! Melt-in-your-mouth brownies that are easy and elegant. Chocolate brownies marbled with cheesecake make fabulous squares! This is by far my most requested recipe.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1 (8 ounce) package cream cheese, softened</li>
                        <li>1/4 cup white sugar</li>
                        <li>1 egg </li>
                        <li>1 cup semisweet chocolate chips</li>
                        <li>1/4 cup butter</li>
                        <li>1 cup semisweet chocolate chips</li>
                        <li>1/2 cup white sugar</li>
                        <li>2 eggs</li>
                        <li>2/3 cup all-purpose flour</li>
                        <li>1/2 teaspoon baking powder</li>
                        <li>1/4 teaspoon salt</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Preheat oven to 350 degrees F (175 degrees C). Grease a 9-inch square baking pan.</li>
                        <li>Combine cream cheese with 1/4 cup sugar and 1 egg in a mixing bowl; beat until smooth. Stir 1 cup chocolate chips into the cream cheese mixture. Set aside.</li>
                        <li>Fill a saucepan with water and bring to a boil. Turn the heat off, and set a heatproof mixing bowl over the water. In the mixing bowl, combine butter with the remaining cup of chocolate chips; stir until just melted and blended together. Stir in the remaining 1/2 cup sugar and 2 eggs, then sift together flour, baking powder, and salt; stir into chocolate until evenly blended.</li>
                        <li>Pour half of the batter into the prepared baking pan. Spread the cream cheese mixture over the chocolate layer. Top with remaining chocolate mixture (this doesn't need to completely cover the cream cheese layer). Using a knife, swirl the top chocolate layer into the cream cheese to make a marble pattern.</li>
                        <li>Bake in preheated oven at 350 degrees F (175 degrees C) for 25 to 30 minutes, or until top is crinkled and edges pull away from sides of the pan. Cool thoroughly. Cut into 12 to 16 squares. Store in the refrigerator or freeze.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/224393.jpg');">
                <div class="grid-title">
                    <p>Better Cheddar Chicken</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Better Cheddar Chicken</h1>
                    <p>By Ty Mote</p>
                    <blockquote>Very easy coated chicken recipe made with two kinds of cheese, and spicy seasonings.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1 cup crushed cornflakes cereal</li>
                        <li>3/4 cup grated Parmesan cheese</li>
                        <li>1/4 cup shredded Cheddar cheese</li>
                        <li>1 tablespoon garlic salt</li>
                        <li>1 tablespoon Creole-style seasoning</li>
                        <li>1/2 teaspoon cayenne pepper</li>
                        <li>1/2 cup butter, melted</li>
                        <li>8 skinless, boneless chicken breast halves</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Preheat the oven to 350 degrees F (175 degrees C). Lightly grease a 9x13 inch baking dish.</li>
                        <li>In a large bowl, mix together the cornflake crumbs, Parmesan cheese, Cheddar cheese, garlic salt, Creole seasoning, and cayenne pepper. Pour melted butter into a shallow dish. Coat each chicken breast with melted butter, and then roll in the crumb mixture. Place coated chicken into the prepared baking dish.</li>
                        <li>Bake uncovered for 40 minutes in the preheated oven, until chicken is no longer pink, and the juices run clear.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/3774266.jpg');">
                <div class="grid-title">
                    <p>Cashew Chicken Stir Fry</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Cashew Chicken Stir Fry</h1>
                    <p>By Sweet B</p>
                    <blockquote>A healthy and delightful one dish meal. Low sodium soy sauce can be used.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>4 skinless, boneless chicken breast halves, cut into bite-size pieces</li>
                        <li>1 tablespoon Cajun seasoning blend (such as Tony Chachere's®), or to taste
                        <li>1 1/4 cups chicken broth</li>
                        <li>1 tablespoon cornstarch</li>
                        <li>4 teaspoons soy sauce, divided</li>
                        <li>2 tablespoons olive oil, divided</li>
                        <li>2 cups shredded cabbage</li>
                        <li>25 sugar snap peas, chopped</li>
                        <li>10 small spears fresh asparagus, trimmed and cut into bite-size pieces</li>
                        <li>3 stalks celery, chopped</li>
                        <li>1/2 red bell pepper, cut into thin strips</li>
                        <li>2 green onions, chopped</li>
                        <li>1 (8 ounce) can sliced bamboo shoots, drained</li>
                        <li>1/2 cup cashews</li>
                        <li>1 pinch paprika, or to taste (optional)</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Sprinkle chicken pieces with Cajun seasoning.</li>
                        <li>Whisk chicken broth, cornstarch, and 3 teaspoons soy sauce together in a bowl until completely blended.</li>
                        <li>Heat 1 tablespoon olive oil in a deep frying pan or wok over high heat. Cook and stir chicken in hot oil until cooked through, 6 to 10 minutes. Remove chicken from pan and drain any accumulated liquids.</li>
                        <li>Heat remaining 1 tablespoon olive oil in the frying pan or wok over high heat. Stir fry cabbage, snap peas, asparagus, celery, red bell pepper, green onions, and bamboo shoots for 1 minute. Stir in 1 teaspoon soy sauce. Continue cooking until vegetables are tender but still crisp, about 3 minutes.</li>
                        <li>Stir chicken into cabbage mixture. Pour chicken broth mixture over chicken mixture, reduce heat to medium, and simmer until sauce thickens, about 1 minute. Reduce heat to low; add cashews and cook until heated through, 1 minute. Sprinkle with paprika.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/1122008.jpg');">
                <div class="grid-title">
                    <p>Coconut-Cream Cheese Frosting</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Coconut-Cream Cheese Frosting</h1>
                    <p>By Lilster</p>
                    <blockquote>I wanted a frosting for a coconut layer cake that stood up to a stronger flavor without overpowering it and without being too sweet. If frosting a layer cake, I recommend spreading melted apricot preserves over the center layer, along with some frosting.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>1 (8 ounce) package cream cheese, softened</li>
                        <li>1/2 cup unsalted butter, softened</li>
                        <li>4 cups confectioners' sugar</li>
                        <li>2 tablespoons heavy cream</li>
                        <li>1/2 teaspoon salt</li>
                        <li>1/2 teaspoon coconut flavoring</li>
                        <li>1 teaspoon vanilla extract</li>
                        <li>1/2 cup sweetened shredded coconut</li>
                        <li>1 cup sweetened shredded coconut, toasted (optional)</li>                            
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Beat the cream cheese and butter in a mixer bowl until light and fluffy. Gradually add the confectioners' sugar, one cup at a time, alternating with heavy cream. Beat in the salt, coconut flavoring, and vanilla extract. Continue beating until mixture is smooth and spreadable. Add additional confectioners' sugar if necessary to thicken the frosting, or more cream to thin. Stir in the coconut. If desired, spoon toasted coconut evenly over frosted cake.</li>
                    </ol>
                </div>
            </li>
            <li class="grid-item" style="background-image: url('http://images.media-allrecipes.com/userphotos/720x405/4487754.jpg');">
                <div class="grid-title">
                    <p>Easy Batter Fruit Cobbler</p>
                    <p><i class="fa fa-heart-o"></i></p>
                </div>
                <div class="grid-details hidden">
                    <i class="fa fa-close absolute top right"></i>
                    <h1>Easy Batter Fruit Cobbler</h1>
                    <p>By Pam</p>
                    <blockquote>Short of serving store-bought ice cream, you won't find a simpler, more delicious dessert than this fruit cobbler. Use any juicy summer fruit: peaches, nectarines, blueberries, blackberries, strawberries, raspberries. And if you use frozen berries, this dessert can be assembled in less than 10 minutes.</blockquote>
                    <h3>Ingredients</h3>
                    <ul>
                        <li>4 tablespoons butter</li>
                        <li>3/4 cup all-purpose flour</li>
                        <li>3/4 cup sugar</li>
                        <li>1 teaspoon baking powder</li>
                        <li>1/4 teaspoon salt</li>
                        <li>3/4 cup milk</li>
                        <li>2 cups of sliced fresh peaches or nectarines, or whole blueberries, strawberries, raspberries, blackberries or a combination of fruits (or a 12-ounce package of frozen berries)<li>1 tablespoon sugar</li>
                    </ul>
                    <h3>Directions</h3>
                    <ol>
                        <li>Adjust oven rack to upper-middle position, and heat oven to 350 degrees.</li>
                        <li>Put butter in an 8-inch square or 9-inch round pan; set in oven to melt. When butter has melted, remove pan from oven.</li>
                        <li>Whisk flour, 3/4 cup of sugar, baking powder and salt in small bowl. Add milk; whisk to form a smooth batter. Pour batter into pan, then scatter fruit over batter. Sprinkle with remaining 1 Tb. of sugar.</li>
                        <li>Bake until batter browns and fruit bubbles, 50 to 60 minutes. Serve warm or at room temperature with a dollop of whipped cream or a small scoop of vanilla ice cream, if desired.</li>
                    </ol>
                </div>
            </li>
        </ul>
    </body>
</html>
            
          
!
            
              body {
  margin: 25px;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
  background-color: #eee;
}

h1,
h2,
h3,
.grid-details p,
blockquote,
ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    margin: 0px 0px 12.5px;
}

blockquote {    
    font-style: italic;
}

.hidden {
    display: none !important;
}

.absolute {
    position: absolute;
}

.top {
    top: 12.5px;
}

.right {
    right: 12.5px;
}

i.fa.fa-heart-o {
    color: rgba(0,0,0,0.7);
}

i.fa.fa-heart {
    color: #FF9090;
}

i.fa.fa-close {
    color: #ccc;
    &:hover {
      color: #000;
    }
}

ul.grid {
  list-style: none;

  .grid-details ul li {
    margin-left: 25px;
    margin-bottom: 6px;
  }

  .grid-details ul li:last-child {
      margin-bottom: 12.5px;
  }
}

.grid {
    display: flex;
    flex-wrap: wrap;

    .grid-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 2px;
        min-height: 200px;
        max-height: 400px;
        width: calc(100% / 5);        
        margin: 12.5px;

        &:hover {
            cursor: pointer;
        }

        &.active,
        &.active.liked {
            height: 100%;
            max-height: 100%;
            width: calc(100%/2);
            transition-duration: 800ms;
    
            i:hover {
                cursor: pointer;
            }
        }

        &.liked {
            width: calc(100% / 3);
        }
    
        &.active:hover {
            cursor: auto;
        }

        .grid-title {
            height: 50px;
            padding: 0 15px 0 12.5px;
            background-color: #fff;
            color: #000;

            p:nth-of-type(1) {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 80%;
                float: left;
            }
            p:nth-of-type(2) {
                float: right;
                width: 20%;

                i {
                    float: right;
                }
            }
        }
    }

    .grid-details {
        background-color: #fff;
        padding: 12.5px;
    }
}
@media (max-width: 800px) {
    .grid {
        .grid-item { 
            width: calc(50% - 25px);
        }
        .grid-item.active,
        .grid-item.active.liked {
            width: 100%;
        }
        .grid-item.liked {
            width: 100%;
        }
    }
}
@media (max-width: 600px) {
    .grid {
        .grid-item,
        .grid-item.active,
        .grid-item.active.liked {
            width: 100%;
        }
        .grid-item.liked {
            min-height: 300px;
            width: 100%;
        }
    }
}

@supports (display: grid) {
    .grid {
        display: grid;
        grid-auto-flow: dense;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: minmax(250px, auto);
        grid-gap: 12.5px;        

        .grid-item {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            grid-row: span 1;
            grid-column: span 1;
            border-radius: 2px;
            max-height: unset;
            min-height: unset;
            width: unset;            
            margin: unset;

            &:hover {
                cursor: pointer;
            }

            &.active,
            &.active.liked {
                grid-row: span 4;
                grid-column: span 3;
                width: unset;
                transition-duration: 800ms;
    
                i:hover {
                    cursor: pointer;
                }
            }
    
            &.active:hover {
                cursor: auto;
            }
    
            &.liked {
                grid-row: span 1;
                grid-column: span 2;
                width: unset;
                min-width: unset;
            }            

            .grid-title {
                height: 50px;
                padding: 0 15px 0 12.5px;
                background-color: #fff;
                color: #000;
                display: grid;
                grid-template-columns: repeat(12, 1fr);  

                p:nth-of-type(1) {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    grid-column: 1/11;
                    width: unset;
                    float: unset;
                }
                p:nth-of-type(2) {
                    grid-column: 12/12;
                    width: unset;

                    i {
                        float: right;
                    }
                }
            }
        }

        .grid-details {
            background-color: #fff;
            padding: 12.5px;
        }
    }
    @media (max-width: 800px) {
        .grid {
            .grid-item.active,
            .grid-item.active.liked {
                grid-row: span 3;
                grid-column: span 1;
            }
            .grid-item.liked {
                grid-row: span 2;
                grid-column: span 1;
            }
        }
    }
    @media (max-width: 600px) {
        .grid .grid-item.liked {
            min-height: 100%;
        }
    }
}


            
          
!
            
              $( document ).ready(function() {
    $('.grid .grid-item').on('click', function(e) {
        var $clicked = $(this);
        $clicked.parent('.grid').find('.grid-item').not($clicked).removeClass('active');  
        $clicked.parent('.grid').find('.grid-details').not($clicked).addClass('hidden');  
        $clicked.parent('.grid').find('.grid-title').not($clicked).removeClass('hidden');  
        $clicked.addClass('active');
        $('.grid .grid-item.active .grid-title').addClass('hidden');   
        $('.grid .grid-item.active .grid-details').removeClass('hidden');
        e.stopPropagation();
    });
    $('.fa.fa-close').click(function(e) {
        e.stopPropagation();
        var $clicked = $(this);
        $clicked.parents('.grid-item').find('.grid-title').removeClass('hidden');  
        $clicked.parents('.grid-details').addClass('hidden');              
        $clicked.parents('.grid-item').removeClass('active');
    });   
    $('i.fa.fa-heart-o').click(function(e) {
        e.stopPropagation();
        console.log('Liked recipe');
        var $clicked = $(this);
        $clicked.toggleClass('fa-heart-o');
        $clicked.toggleClass('fa-heart');
        $clicked.parents('.grid-item').toggleClass('liked');
    });
    // $('i.fa.fa-heart').click(function(e) {
    //     console.log('Unliked recipe');
    //     e.stopPropagation();        
    //     var $clicked = $(this);
    //     $clicked.removeClass('fa-heart').addClass('fa-heart-o');
    //     $clicked.parents('.grid-item').removeClass('liked'); 
    // });
});
            
          
!
999px
Loading ..................

Console