web-html5-scripts/cards/horizontal-cards-with-fade-animation/index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Horizontal Cards with Fade Animation</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"><link rel="stylesheet" href="./style.css">
</head>

<body class="grey lighten-2">
  <div class="container">
    <div class="col s12 m7">

      <div class="card horizontal">
        <div class="card-image">
          <img src="https://unsplash.it/400/300?image=503" class="fadeIn">
        </div>
        <div class="card-stacked">
          <div class="card-content">
            <span class="card-title">San Francisco</span>
            <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
              </p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
    </div>


    <div class="col s12 m7">

      <div class="card horizontal" id="fadedfx">

        <div class="card-stacked">
          <div class="card-content">
            <span class="card-title">New York </span>
            <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
              </p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
        <div class="card-image">
          <img src="https://unsplash.it/400/300?image=736" class="fadedfx" class="fadedfx">
        </div>
      </div>

    </div>

    <div class="col s12 m7">

      <div class="card horizontal">
        <div class="card-image">
          <img src="https://unsplash.it/400/300?image=736" class="fadedfx">
        </div>
        <div class="card-stacked">
          <div class="card-content">
            <span class="card-title">London</span>
            <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
              </p>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>
<script src='https://code.jquery.com/jquery-1.10.1.min.js'></script><script  src="./script.js"></script>

</body>
</html>
Updating scripts and snippets 2020-01-20 21:00:54 +01:00			`<!DOCTYPE html>`
			`<html lang="en" >`
			`<head>`
			`<meta charset="UTF-8">`
			`<title>Horizontal Cards with Fade Animation</title>`
			`<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
Update some existing projects and as well adding new 2021-02-09 15:42:15 +01:00			`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"><link rel="stylesheet" href="./style.css">`
Updating scripts and snippets 2020-01-20 21:00:54 +01:00			`</head>`

			`<body class="grey lighten-2">`
			`<div class="container">`
			`<div class="col s12 m7">`

			`<div class="card horizontal">`
			`<div class="card-image">`
			`<img src="https://unsplash.it/400/300?image=503" class="fadeIn">`
			`</div>`
			`<div class="card-stacked">`
			`<div class="card-content">`
			`<span class="card-title">San Francisco</span>`
			`<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.`
			`</p>`
			`</div>`
			`<div class="card-action">`
			`<a href="#">This is a link</a>`
			`</div>`
			`</div>`
			`</div>`
			`</div>`


			`<div class="col s12 m7">`

			`<div class="card horizontal" id="fadedfx">`

			`<div class="card-stacked">`
			`<div class="card-content">`
			`<span class="card-title">New York </span>`
			`<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.`
			`</p>`
			`</div>`
			`<div class="card-action">`
			`<a href="#">This is a link</a>`
			`</div>`
			`</div>`
			`<div class="card-image">`
			`<img src="https://unsplash.it/400/300?image=736" class="fadedfx" class="fadedfx">`
			`</div>`
			`</div>`

			`</div>`

			`<div class="col s12 m7">`

			`<div class="card horizontal">`
			`<div class="card-image">`
			`<img src="https://unsplash.it/400/300?image=736" class="fadedfx">`
			`</div>`
			`<div class="card-stacked">`
			`<div class="card-content">`
			`<span class="card-title">London</span>`
			`<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.`
			`</p>`
			`</div>`
			`<div class="card-action">`
			`<a href="#">This is a link</a>`
			`</div>`
			`</div>`
			`</div>`
			`</div>`
			`</div>`
			`</body>`

			`<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>`
			`<script src='https://code.jquery.com/jquery-1.10.1.min.js'></script><script src="./script.js"></script>`

			`</body>`
			`</html>`